你是不是也受够了这些“性能刺客”?
- 引入一个
debounce,打包体积却增加了1.4KB?- 想找个完美的
omit函数,结果发现性能慢到离谱?- 在追求极致性能的项目里,连1KB的冗余代码都让你如坐针毡?
GitHub上杀出一匹黑马——es-toolkit!
它宣称:“不是Lodash的替代品,而是JavaScript工具库的终极形态!”
结果直接封神:
- 性能碾压Lodash 11倍!
omit函数每秒执行近500万次! - 单函数平均体积<300B,
difference函数体积仅91字节,比Lodash小97%! - 100% ESM + TypeScript,类型提示精准到毛孔!
- 完美兼容Lodash!提供
/compat模式,迁移成本几乎为零!
这个神级项目,名叫——es-toolkit
一、先看对比:新王登基,旧神退位!
包体积:小到离谱!
| 函数 | es-toolkit | Lodash-es | 缩减比例 |
|---|---|---|---|
sample | 88 bytes | 2000 bytes | -95.6% |
difference | 91 bytes | 3190 bytes | -97.2% |
debounce | 144 bytes | 1400 bytes | -89.7% |
throttle | 110 bytes | 1460 bytes | -92.5% |
pick | 657 bytes | 3860 bytes | -83.0% |
性能:快到飞起!
| 函数 | es-toolkit (ops/sec) | Lodash-es (ops/sec) | 性能倍数 |
|---|---|---|---|
omit | 4,767,360 | 403,624 | 11.8× |
pick | 9,121,839 | 2,663,072 | 3.43× |
difference | 10,436,101 | 5,155,631 | 2.02× |
intersection | 9,999,571 | 4,630,316 | 2.15× |
没有花里胡哨的营销,只有硬核的Benchmark和Bundle Analyzer报告! es-toolkit的目标很明确:成为你项目里最轻、最快、最可靠的那1%。
二、es-toolkit到底是什么?硬核拆解
一句话总结:一个由韩国顶级金融科技公司Toss打造的、面向未来的JavaScript原子化工具库。
核心理念(看懂就知道有多狠)
- 原子化设计(Atomic Design):每个函数都是一个独立的ESM模块,无任何内部依赖。引入
debounce,就只会打包debounce。 - 极致性能:通过充分利用现代 JavaScript API,部分函数甚至可以获得高达11倍的性能提升。
- 极致精简:与Lodash等其他库相比,可以减少高达97%的包体积,其中一些实用函数的体积甚至少于100字节。
最关键:三大技术护城河
- 纯ESM架构:从第一天起就只为现代构建工具(Vite, Webpack 5+, Rollup)设计,彻底告别CommonJS的历史包袱。
- 类型即文档:内置TypeScript类型,并经过严格测试,确保了100%的测试覆盖率,以保证最大的可靠性。
- 现代化实现:利用最新的 JavaScript 特性,在保证功能强大的同时,实现了极致的性能和体积优化。
三、功能实测:快到离谱,小到极致
别以为小就没功能!es-toolkit覆盖了数组、函数、数学、对象、字符串等所有常用场景:
✅ debounce / throttle:防抖节流,体积仅100多字节,性能提升近90%!
✅ pick / omit:对象属性筛选,omit性能是Lodash的11倍!
✅ difference / intersection:数组差集交集,体积小97%,速度快2倍!
✅ isNotNil / isPlainObject:精准的类型守卫,让TypeScript体验更上一层楼。
实战代码:Vue 3 + es-toolkit
<script setup lang="ts">
// 只打包这一个函数,体积增加144字节!
import { debounce } from 'es-toolkit';
// 对象操作,性能提升11倍!
import { omit } from 'es-toolkit';
const onInput = debounce((e: Event) => {
// 处理输入...
}, 300);
const cleanUser = omit(user, ['password', 'token']);
</script>
体验如何? 丝滑、精准、毫无负担!
四、无缝迁移:Lodash用户福音
担心API不兼容?完全不必!
es-toolkit提供了 es-toolkit/compat 兼容层,目标是提供与lodash百分之百的功能兼容性。
// 迁移前 (Lodash)
import { chunk, debounce } from 'lodash-es';
// 迁移后 (es-toolkit)
import { chunk, debounce } from 'es-toolkit/compat';
- 全面测试:
/compat模块已经对lodash的实际测试用例进行了全面测试。 - 平滑过渡:一旦迁移完成,你可以逐步替换回原始的
es-toolkit以获得最佳性能。
这意味着,你可以零风险、低成本地享受到es-toolkit带来的性能和体积红利!
五、为什么能这么快、这么小?
答案就在它的基因里:
- 现代化的实现:es-toolkit不是对旧库的简单重写,而是站在现代JS引擎的肩膀上,重新思考每一个算法和API的设计。
- 无历史包袱:它不兼容IE,不支持过时的API,只专注于为现代Web应用提供最高效的解决方案。
- 社区驱动:作为开源项目,它吸引了全球顶尖开发者的贡献,持续保持技术领先。
简单说:它把每一个字节和每一次CPU周期都当成了自己的孩子,绝不浪费!
六、这不仅是工具,更是未来
es-toolkit真正的价值:
它代表了一种新的开发哲学——对性能和简洁性的极致追求。
- 对个人开发者:让你的代码更优雅,项目更轻盈。
- 对企业:在微前端、低带宽等场景下,每一KB的节省都意味着真金白银的成本降低和用户体验的提升。
- 对整个生态:推动工具库从“大而全”向“精而美”演进。
最后
当你的同事还在为打包体积焦头烂额时,你已经用es-toolkit将项目瘦身了90%;
当你的对手还在为性能瓶颈寻找解决方案时,你已经用一行代码实现了11倍的性能飞跃。
这就是掌握es-toolkit的力量。
未来已来,只是尚未流行。现在入局,你就是下一代高性能Web应用的先行者。
项目地址:github.com/toss/es-too…
中文文档:www.es-toolkit.cn/
你在项目里最想用es-toolkit替换掉哪个Lodash函数?评论区聊聊!
各位互联网搭子,要是这篇文章成功引起了你的注意,别犹豫,关注、点赞、评论、分享走一波,让我们把这份默契延续下去,一起在知识的海洋里乘风破浪!