bundle-size

2 posts

toss

es-toolkit: How a Small Internal Library Became a Global Project (opens in new tab)

es-toolkit began at Toss as a modern alternative to lodash, addressing its outdated architecture, legacy-browser code, lack of native ECMAScript Module support, and inefficient implementations. By removing unnecessary logic and relying on modern browser APIs, es-toolkit achieved 2–10× performance improvements and, in some cases, reduced bundle sizes by more than 30×. Its open-source momentum attracted global contributors, eventually helping it become widely adopted. ## The Beginning of es-toolkit - Toss developers needed dependable utilities such as `throttle`, `debounce`, and `uniq`. - Although lodash was widely used, it had several limitations: - Outdated code structure and implementations. - Defensive logic for legacy browsers such as Internet Explorer. - Little use of native APIs like `Array#map`. - No ECMAScript Modules, making tree-shaking difficult. - `lodash-es` added ESM support but retained much of lodash’s older and inefficient implementation. - Toss’s internal `@toss/utils` library required significant effort to maintain and handle edge cases. - es-toolkit was created to provide a modern, efficient utility library for current web development. - Initial results showed: - At least 2× and sometimes over 10× faster execution. - Bundle-size reductions of more than 30× in some cases. ## Open-Source Adoption and Community Growth - Toss initially announced es-toolkit through its frontend social media channels. - Developers contributed missing functions, bug fixes, and performance improvements. - After gaining attention in Korea, the project was shared on Reddit and received over 100 upvotes and tens of thousands of repository visitors. - International discussions led to coverage in blogs and newsletters. - Community members created bundler plugins and migrated dependencies in established libraries from lodash to es-toolkit. ## From Contributor to Toss Developer - Dayong Lee discovered es-toolkit through Toss’s announcement and began contributing despite not being a Toss employee. - Starting with small pull requests, he gradually became the project’s second-largest contributor. - Code reviews helped him develop stronger skills in: - JavaScript language features. - API and interface design. - Open-source collaboration. - His involvement with es-toolkit eventually contributed to his joining Toss Bank. ## Making Migration Easier with `es-toolkit/compat` - Although the library was becoming more complete, adoption remained slow because many projects depended heavily on older utility libraries. - Migrating individual lodash functions across a large codebase would be tedious and risky. - es-toolkit therefore introduced `es-toolkit/compat`, a drop-in replacement designed to preserve lodash’s interfaces and behavior while modernizing its internal implementation. - This compatibility layer reduced migration effort and allowed projects to gain performance improvements by changing imports rather than rewriting utility usage. - The layer was particularly important because es-toolkit’s streamlined behavior could otherwise differ from lodash in edge cases and cause runtime errors. es-toolkit’s story demonstrates how a focused modernization effort can replace entrenched legacy dependencies. Providing both a faster native-style library and a compatibility layer made adoption more practical while enabling broad open-source participation.

toss

97% Smaller, 2x Faster: How es-toolkit Reached 10 Million Weekly Downloads (opens in new tab)

es-toolkit is a modern, TypeScript-first JavaScript utility library designed as a faster and smaller alternative to lodash. Built around ES Modules and independent functions, it can reduce bundle sizes by up to 97% and improve runtime performance by more than 2x. Its `es-toolkit/compat` package provides a 100% lodash-compatible migration path with little or no code changes. ## Why es-toolkit was created - Toss’s frontend team saw an opportunity to modernize the utility-library ecosystem. - lodash was designed before ES Modules, advanced JavaScript engines, TypeScript, and bundle size became central concerns. - es-toolkit was built from scratch with: - Native ES Module support - Tree-shaking-friendly independent functions - Built-in TypeScript definitions - Modern runtime optimizations ## Bundle size and runtime performance - lodash-es can include internal helper dependencies even when importing a single function. - es-toolkit functions are designed to be independent, avoiding hidden dependencies. - A sample set of five functions—`groupBy`, `keyBy`, `pick`, `omit`, and `debounce`—adds roughly: - 30 KB with lodash-es - 1 KB with es-toolkit - The library reports up to 97% smaller bundles and more than 2x faster execution. - Specific benchmarks include: - `sample`: approximately 2,000 bytes in lodash versus 88 bytes in es-toolkit - `omit`: approximately 11.8x faster at runtime ## Adoption and ecosystem support - es-toolkit surpassed 10 million weekly npm downloads within 18 months. - It has been adopted by Microsoft, Yarn, Storybook, IBM, Recharts, Ink, and Dify. - The article emphasizes that adoption came through independent evaluations and benchmarks rather than major promotional campaigns. ## Migration from lodash - Most imports can be changed directly: ```ts import { pick } from 'es-toolkit'; ``` - `es-toolkit/compat` provides a drop-in lodash replacement with full compatibility, validated against lodash’s test suite. - Existing projects can redirect the `lodash` dependency without changing source code: ```json { "dependencies": { "lodash": "npm:es-toolkit@^1.44.0" } } ``` - Teams can later migrate from compatibility imports to native es-toolkit imports for additional bundle and performance benefits. - An official `@es-toolkit/codemod` tool is available to automate migration. ## TypeScript and maintenance - Type definitions are shipped alongside the implementation and are kept synchronized. - This avoids the version mismatches and inaccuracies possible with lodash’s separately maintained `@types/lodash` package. - The project is actively maintained, with regular additions and responsive issue and pull-request handling. ## Project direction - es-toolkit is part of Toss’s broader open-source initiative. - Related projects include: - `overlay-kit` for Promise-based React overlays - `use-funnel` for type-safe multi-step flows - `suspensive` for React Suspense primitives - The library is MIT licensed and installable with `npm install es-toolkit`. For most lodash users, the recommended approach is to start with the compatibility alias for an immediate, low-risk upgrade, then progressively adopt native es-toolkit imports to maximize bundle-size and performance improvements.