前端工具库lodash与lodash-es区别详解

news2025/6/10 13:34:48

lodash 和 lodash-es 是同一工具库的两个不同版本，核心功能完全一致，主要区别在于模块化格式和优化方式，适合不同的开发环境。以下是详细对比：

1. 模块化格式

lodash
- 使用 CommonJS 模块格式（require/module.exports）。
- 适用于 Node.js 环境或通过 Webpack/Browserify 等工具打包的传统前端项目。
- 示例：
  
  javascript
  
  复制
  
  下载
```
const _ = require('lodash'); // CommonJS 导入
_.debounce(/* ... */);
```
lodash-es
- 使用 ES Module 格式（import/export）。
- 适用于现代前端框架（Vite、Rollup、Webpack + ES Module）或原生支持 ES Module 的浏览器环境。
- 示例：
  
  javascript
  
  复制
  
  下载
```
import { debounce } from 'lodash-es'; // ES Module 导入
debounce(/* ... */);
```

2. 摇树优化（Tree Shaking）

lodash
- 不支持 Tree Shaking。即使只使用一个函数（如 debounce），也会引入整个库或整个功能组（如 lodash/debounce 可能包含冗余代码）。
- 导致打包体积较大。
lodash-es
- 天然支持 Tree Shaking。构建工具（Webpack/Rollup）能按需剔除未使用的代码。
- 示例：若只导入 debounce，最终打包仅包含该函数及其依赖。
- 显著减小项目体积，是现代前端项目的首选。

3. 文件结构与构建方式

lodash
- 发布的是 预编译后的 CommonJS 文件（位于 lodash 包的根目录）。
- 提供单文件全量引入（lodash）和按功能组引入（lodash/debounce）。
lodash-es
- 发布的是 ES Module 的源码（保留原始目录结构）。
- 所有函数独立导出，便于构建工具静态分析。
- 文件路径示例：
  
  javascript
  
  复制
  
  下载
```
import debounce from 'lodash-es/debounce'; // 按文件路径导入
```

4. 使用场景

场景	推荐选择	原因
现代前端项目（Vue/React）	`lodash-es`	支持 Tree Shaking，体积更小
Node.js 服务端	`lodash`	天然兼容 CommonJS
传统脚本（通过 `<script>`）	`lodash`	直接使用全局变量 `_`
对打包体积敏感的项目	`lodash-es`	按需引入减少体积

5. 安装与导入

bash

复制

下载

# 安装 lodash (CommonJS)
npm install lodash

# 安装 lodash-es (ES Module)
npm install lodash-es

javascript

复制

下载

// lodash 的两种导入方式
const _ = require('lodash'); // 全量引入
const debounce = require('lodash/debounce'); // 按功能组引入

// lodash-es 的导入方式
import { debounce } from 'lodash-es'; // 按需 Tree Shaking
import debounce from 'lodash-es/debounce'; // 直接按路径导入

6. 体积对比示例

假设项目中只使用 debounce：

lodash：引入后最小体积约 24KB（整个功能组）。
lodash-es：通过 Tree Shaking 可缩减至 1KB 以下。

✅ 使用 lodash-es + Tree Shaking 能轻松节省 90%+ 的体积。

总结

特性	`lodash`	`lodash-es`
模块格式	CommonJS	ES Module
Tree Shaking	❌ 不支持	✅ 完美支持
打包体积	较大	按需加载极小
使用场景	Node.js/传统环境	现代前端框架
按需导入	功能组级	函数级