如何通过Webpack仅打包React项目中实际导入的函数以减小包体积？

这个问题我之前帮不少开发者处理过——eject后的CRA项目里，lodash这类库的tree shaking失效确实挺头疼的，不过有几个靠谱的办法能帮你只打包实际用到的函数，减小包体积：

方案1：直接导入单个函数的具体文件路径 #

这是最直接、不需要额外配置的方法。lodash的每个函数都有独立的文件，你可以跳过主包直接导入对应文件：

import _cloneDeep from 'lodash/cloneDeep';

这样Webpack只会打包lodash/cloneDeep.js这单个文件，而不是整个lodash库。唯一的小缺点是如果用到多个lodash函数，每个都要单独写导入语句，但胜在简单直接，不用依赖任何额外工具。

方案2：用babel-plugin-lodash自动优化导入 #

如果你想保持import { cloneDeep } from 'lodash'的简洁写法，可以借助babel-plugin-lodash帮你自动转换导入路径。

操作步骤：

1. 安装开发依赖：

npm install babel-plugin-lodash --save-dev

2. 修改项目的Babel配置文件（eject后项目里会有babel.config.js或.babelrc），添加该插件：

module.exports = {
  // 保留原有配置...
  plugins: [
    // 新增这一行
    'lodash'
  ]
};

这个插件会在编译阶段自动把你的lodash导入转换成单个函数的路径，让Webpack正常执行tree shaking。

方案3：切换到lodash-es（推荐） #

lodash-es是lodash官方发布的ES模块版本，原生支持tree shaking——因为ES模块是静态结构，Webpack可以精准识别并剔除未被使用的代码。

操作步骤：

1. 安装lodash-es：

npm install lodash-es

2. 修改你的导入语句：

import { cloneDeep as _cloneDeep } from 'lodash-es';

这样Webpack会自动摇掉lodash-es里所有未被使用的函数，只打包你用到的cloneDeep。这个方案最省心，后续不管你添加多少lodash函数，只要保持这种导入方式，tree shaking都会自动生效。

额外确认 #

eject后的CRA默认在生产环境已经开启了tree shaking，你可以检查webpack.config.prod.js里的mode是否为production，以及optimization.usedExports是否设为true（CRA默认已经配置好这两项）。

内容的提问来源于stack exchange，提问作者Kwinten