大家好，很高兴又见面了，我是”高级前端‬进阶‬”，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 es-toolkit

es-toolkit 是一款先进的高性能 JavaScript 实用程序库，体积小巧，并支持强类型注释，典型特征包括：

• 提供各种日常实用函数并采用现代实现，例如： debounce、delay、chunk、sum 和 pick 等
• 设计充分思考了性能，在现代 JavaScript 环境中实现了 2-3 倍的性能提升等
• 开箱即用地支持摇树优化 (tree shaking)，与其他库相比，JavaScript 代码量减少了高达 97%
• 提供完整的兼容层，可无缝替换 lodash，其兼容层名为 es-toolkit/compat
• 内置 TypeScript 支持，提供简单而强劲的类型，还提供 isNotNil 等实用类型保护。
• 深受 Storybook、Recharts、ink 和 CKEditor 等热门开源项目的信赖和使用
• 经过了实战测试，测试覆盖率达到 100%，确保了可靠性和稳健性。
• 全面运行时支持，包括 Node.js、Deno、Bun 和浏览器。

目前 es-toolkit 在 Github 通过 MIT 协议开源，有超过 9k 的 star、26.7k 的 fork、200 + 的代码贡献者，妥妥的前端顶级开源项目。

如何使用 es-toolkit

es-toolkit 可通过 npm（适用于 Node.js 和 Bun）以及 JSR（适用于 Deno）获取，开发者还可以通过将 es-toolkit 导入 CDN 来在浏览器中使用：

npm install es-toolkit
// npm
pnpm add es-toolkit
// pnpm
yarn add es-toolkit
// yarn
deno add @es-toolkit/es-toolkit
// jsr
bun add es-toolkit
// bun

开发者还可以在 jsdelivr、unpkg 等 CDN 上找到 es-toolkit，其定义 _ 来包含所有函数，类似于 Lodash。

// jsdelivr
<script src="https://cdn.jsdelivr.net/npm/es-toolkit@%5E1"></script>
<script>
  var arr = _.chunk([1, 2, 3, 4, 5, 6], 3);
</script>

// unpkg
<script src="https://unpkg.com/es-toolkit@%5E1"></script>
<script>
  var arr = _.chunk([1, 2, 3, 4, 5, 6], 3);
</script>

开发者还可以从 esm.sh 引用：

<script type="importmap">
  {
    "imports": {
      "es-toolkit": "https://esm.sh/es-toolkit@%5E1"
    }
  }
</script>
<script type="module">
  import {chunk} from 'es-toolkit';
  chunk([1, 2, 3, 4, 5, 6], 3);
</script>

es-toolkit 全面兼容 Lodash

从 1.39.3 版本开始，es-toolkit 确保与 Lodash 100% 兼容，即函数名完全一样，但更轻量、更快速。

目前 es-toolkit 已被 Storybook、Recharts 和 CKEditor 等热门开源项目采用，并被 Nuxt 推荐。

// es-toolkit/compat aims to provide 100% feature parity with lodash
import {chunk} from 'es-toolkit/compat';
chunk([1, 2, 3, 4], 0);
// Returns [], which is identical to lodash

但是为了最大限度地兼容 lodash，开发者需要使用 es-toolkit/compat，其是一个用于弥合两个库之间差距的兼容层。此模块旨在提供与 lodash 一样的 API，从而更轻松地在两个库之间切换。

需要注意的是，与原始 es-toolkit 相比，es-toolkit/compat 可能会对性能产生轻微影响，并且包大小会更大。此模块旨在促进平稳过渡，迁移完成后，应将其替换为原始 es-toolkit 以获得最佳性能。

// import from '@es-toolkit/es-toolkit' in jsr.
import {chunk, debounce} from 'es-toolkit';
const debouncedLog = debounce(message => {
  console.log(message);
}, 300);
// debounce 方法
debouncedLog('Hello, world!');
const array = [1, 2, 3, 4, 5, 6];
const chunkedArray = chunk(array, 2);
console.log(chunkedArray);
// 输出: [[1, 2], [3, 4], [5, 6]]

参考资料

https://github.com/toss/es-toolkit

https://es-toolkit.dev/compatibility.html