告别 Lodash，拥抱轻量化 JS 工具库：es-toolkit 实战指南一、前端工具库的痛点：当 Lodash 不再

一、前端工具库的痛点：当 Lodash 不再「轻盈」

在前端开发中，Lodash 曾是数据处理的「瑞士军刀」，但随着项目规模扩大，它的缺陷逐渐显现：

体积臃肿：仅引入 debounce 和 pick 两个函数，打包后体积就超过 5KB
性能瓶颈：传统实现未充分利用 ES6+ 特性，复杂场景下函数执行效率偏低
类型缺失：原生不支持 TypeScript，需要额外声明文件才能获得类型提示

而 es-toolkit 的出现，正是为了解决这些问题。这个基于现代 JavaScript 特性构建的工具库，用更小的体积和更快的性能，重新定义了「轻量实用库」的标准。

二、es-toolkit 核心优势：更小、更快、更现代

1. 极致轻量化：体积最多减少 97%

功能	es-toolkit 体积	Lodash 体积	体积对比
`difference`	91 bytes	3190 bytes	-97.2%
`debounce`	144 bytes	1400 bytes	-89.7%
`pick`	657 bytes	3860 bytes	-83.0%

实际收益：在 React 项目中使用 es-toolkit，打包后的 vendor.js 体积减少 40%，首屏加载时间缩短 200ms。

2. 性能飞跃：2-3 倍效率提升

基于 ES6 数组方法（如 Array.includes）和原生数据结构（如 Set）实现，避免了 Lodash 复杂的递归逻辑：

// es-toolkit 的 difference 实现（简化版）
export function difference<T>(arr1: T[], arr2: T[]): T[] {
  const set = new Set(arr2);
  return arr1.filter(item => !set.has(item));
}

相比 Lodash 对多种数据类型的兼容处理，es-toolkit 聚焦主流场景，在常规数据处理中性能提升显著。

3. 现代技术栈友好

TypeScript 原生支持：内置完整类型定义，无需额外配置

按需引入：支持模块化导入，仅加载所需功能

// 仅引入数组工具中的 chunk 函数
import { chunk } from 'es-toolkit/array';

三、常用功能实战：从数组处理到函数优化

1. 数组工具：简洁而强大

🔥 `chunk`：数组分块处理

将长数组分割成指定长度的子数组，适合批量处理数据：

import { chunk } from 'es-toolkit/array';

// 分割数字数组，每 2 个元素一组
chunk([1, 2, 3, 4, 5], 2); 
// 输出: [[1, 2], [3, 4], [5]]

// 处理字符串数组，每 3 个元素一组
chunk(['a', 'b', 'c', 'd', 'e', 'f', 'g'], 3); 
// 输出: [['a', 'b', 'c'], ['d', 'e', 'f'], ['g']]

🔥 `difference`：计算数组差异

快速找出仅存在于第一个数组中的元素，比 Lodash 实现更简洁：

import { difference } from 'es-toolkit/array';

const usersInDb = [1, 2, 3, 4, 5]; // 数据库中的用户 ID
const activeUsers = [2, 4]; // 活跃用户 ID

// 找出未活跃的用户 ID
const inactiveUsers = difference(usersInDb, activeUsers); 
// 输出: [1, 3, 5]

2. 函数工具：性能与易用性兼得

🔥 `debounce`：防抖函数（带取消功能）

优化高频触发场景（如搜索框实时搜索），支持主动取消 pending 任务：

import { debounce } from 'es-toolkit/function';

// 创建防抖函数，延迟 1 秒执行
const search = debounce((keyword: string) => {
  console.log('搜索关键词:', keyword);
}, 1000);

// 快速连续调用
search('react'); // 1 秒后执行
search('react 组件'); // 重置计时，前一次调用被取消
search.cancel(); // 手动取消所有 pending 任务

🔥 `throttle`：节流函数

控制函数在指定时间内最多执行一次，适合滚动事件处理：

import { throttle } from 'es-toolkit/function';

let scrollCount = 0;
const handleScroll = throttle(() => {
  scrollCount++;
  console.log('滚动次数:', scrollCount);
}, 500); // 每 500ms 最多执行一次

window.addEventListener('scroll', handleScroll);

3. 对象工具：精准操作对象属性

🔥 `pick`：提取对象指定属性

按需获取对象中的部分属性，避免冗余数据传递：

import { pick } from 'es-toolkit/object';

const user = {
  id: 1,
  name: 'Alice',
  age: 28,
  email: 'alice@example.com'
};

// 提取用户基本信息
const basicInfo = pick(user, ['id', 'name', 'age']); 
// 输出: { id: 1, name: 'Alice', age: 28 }

四、如何选择：es-toolkit 的适用场景

中小型项目：无需引入全功能库，按需加载即可满足 80% 的数据处理需求
性能敏感项目：如移动端 H5、SSR 应用，体积优化直接影响加载速度
TypeScript 项目：原生类型支持，减少类型声明维护成本
追求极致打包体积：配合 Vite/Webpack 树摇，可进一步剔除未使用代码

五、快速上手：从安装到实践

1. 安装

pnpm install es-toolkit
# 或使用 npm/yarn
npm install es-toolkit

2. 最佳实践

按需导入：仅引入需要的函数，避免体积膨胀

// 错误做法：导入整个工具库（体积大）
import * as esToolkit from 'es-toolkit';

// 正确做法：单独导入所需函数（体积最小化）
import { difference, pick } from 'es-toolkit';

替代 Lodash 代码：直接替换对应函数，语法基本一致

// 原 Lodash 代码
import { debounce } from 'lodash';

// 替换为 es-toolkit 代码（体积减少 90%）
import { debounce } from 'es-toolkit/function';

六、总结：轻量工具库的未来

es-toolkit 的出现，标志着前端工具库从「大而全」向「小而精」的转变。它用现代 JavaScript 特性解决了 Lodash 体积和性能的痛点，同时保持了代码的简洁性和可读性。

如果你正在开发一个对体积和性能敏感的项目，或者厌倦了 Lodash 的「重量感」，不妨尝试 es-toolkit——让每一行代码都为业务服务，拒绝为冗余功能买单。

资源获取

GitHub 仓库：github.com/toss/es-too…
官方文档：es-toolkit.slash.page
NPM 包：www.npmjs.com/package/es-…

试试用 es-toolkit 重构你的工具函数吧，你会发现：原来轻量与强大，真的可以兼得。

告别 Lodash，拥抱轻量化 JS 工具库：es-toolkit 实战指南