为什么我的Webpack配置无法正确执行Tree Shaking？

诸葛英洁提问于 2026-01-29 16:04:28 阅读 40

优化

我在Vue项目里用lodash时按需引入了方法，但打包后发现完整lodash库还是被包含进去了。配置了webpack.optimization.usedExports为true也没用，这是怎么回事？

比如这个组件：



  {{ formattedDate }}



import _ from 'lodash';

export default {
  data() {
    return {
      formattedDate: _.padStart(new Date().getDate().toString(), 2, '0')
    };
  }
};

我尝试过把webpack.config.js里设置成：


module.exports = {
  optimization: {
    usedExports: true,
    minimize: true
  }
};

但用webpack-bundle-analyzer看打包结果时，lodash的整个库还是被包含进vendor chunk里了。难道Tree Shaking对Vue项目不生效？或者需要额外配置babel？

我来解答赞 9 收藏

反馈

2 条解答

Mc.一莹 Lv1

你这个情况其实挺典型的，Tree Shaking 没生效，问题很可能出在 lodash 的使用方式和打包配置没对上。

首先，你用了 import _ from 'lodash'，这种写法是全量引入，Webpack 确实会尝试 Tree Shaking 把没用的代码标记出来，但前提是你的模块是 ES Module，而且打包工具链要能识别出只用了哪些部分。然而，lodash 默认导出的是一个完整对象，就算你只用了 padStart，Webpack 也很难把它单独拎出来，除非你用了 lodash-es 并且写法更细粒度一点。

其次，Tree Shaking 能不能真正生效，Babel 配置也很关键。如果你用了 Babel 转译，而且没有设置 "modules": "auto" 或者 presets 里没有配置成只转译语法不转模块系统，那最终输出的代码可能是 CommonJS 的，这样 Webpack 就没法做静态分析，Tree Shaking 也就失效了。

建议你这么改：

1. 把 import _ from 'lodash' 改成按需引入，比如：

import padStart from 'lodash/padStart';

2. 如果你用的是 Babel，检查 .babelrc 或 babel.config.js，确保类似这样：

{

  "presets": [

    ["@babel/preset-env", {

      "modules": "auto"

    }]

  ]

}

3. 如果你不想一个个手动引入，可以考虑配合 lodash-es 和 babel-plugin-lodash，这样写法还能保持简洁：

npm install --save lodash-es

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

然后 .babelrc 加个插件：

{

  "plugins": ["lodash"]

}

这样写 import _ from 'lodash-es'，就能按需打包。

最后，如果你不想折腾 Tree Shaking，也可以考虑用 dayjs 或者其他轻量库替代 moment 或 date-fns，lodash 确实太重了。

一句话总结：Tree Shaking 是看模块规范的，CommonJS 基本上没戏，ESM 才有机会。你现在的写法不是 ESM 的用法，Webpack 就只能把整个 lodash 打包进去。

2026-02-04 22:09

喧丹🍀 Lv1

问题出在你用了 _ 这种通配符引入方式，Tree Shaking 对这种方式无能为力。改成按需精确引入就能解决：

import padStart from 'lodash/padStart';



export default {

  data() {

    return {

      formattedDate: padStart(new Date().getDate().toString(), 2, '0')

    };

  }

};

我之前也遇到过这种情况，记得一定要避免用通配符引入，不然打包工具没法分析依赖关系。顺便检查下 Babel 配置，确保没开 loose 模式，否则也可能影响 Tree Shaking。

2026-01-31 18:54