lodash-es 详解

import { cloneDeep } from 'lodash-es' 是使用 ​​ES Modules​​ 语法从 lodash-es 包中按需导入 cloneDeep 函数。这是现代前端开发中推荐的使用 Lodash 的方式：

---

1. lodash-es 是什么？

• 它是 Lodash 的 ​​ES Modules 版本​​（普通 lodash 是 CommonJS 版本）
• 完全兼容 ​​Tree Shaking​​（摇树优化），打包工具（如 Webpack/Vite）会自动移除未使用的代码
• 每个函数都是独立的 ES 模块，可以单独导入

---

2. 为什么推荐这种写法？

对比项	import _ from 'lodash'	import { cloneDeep } from 'lodash-es'
打包体积	引入整个库（约 70KB）	只包含 cloneDeep（约 1KB）
Tree Shaking	❌ 不支持	✅ 完全支持
适用场景	需要大量 Lodash 功能	只需要少量函数

3. 实际使用示例 

// 只导入需要的函数（推荐）
import { cloneDeep, debounce } from 'lodash-es'

const original = { a: 1, b: { c: 2 } }
const copied = cloneDeep(original) // 深拷贝

4. 与普通 lodash 的区别 

 

// ❌ 传统方式（不支持 Tree Shaking）
import _ from 'lodash'
_.cloneDeep(...)

// ✅ 现代方式（推荐）
import { cloneDeep } from 'lodash-es'
cloneDeep(...)

5. 如何安装 

npm install lodash-es
# 或
yarn add lodash-es

6. 特别提示

• 如果使用 Vite/Rollup/Webpack 等现代构建工具，优先选择 lodash-es
• 如果是 Node.js 环境或不支持 ES Modules 的旧项目，才需要用普通 lodash

这种按需导入的方式能让你的项目更轻量化，是 Lodash 官方推荐的最佳实践。