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

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 传统脚本（通过 ） 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 Shakingimport 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/传统环境 现代前端框架 按需导入 功能组级 函数级

优先选择 lodash-es，除非你的环境明确需要 CommonJS（如 Node.js 脚本）。现代前端工具链（Webpack 4+/Rollup/Vite）均已原生支持 ES Module，配合 lodash-es 能最大化优化项目体积。