Webpack优化后打包体积没变化，哪里出问题了？

闲人建杰提问于 2026-02-13 17:45:26 阅读 9

前端

我在React项目里配置了Webpack的压缩和Tree Shaking，但打包体积还是很大。比如这个组件里只用了lodash的get方法：


import _ from 'lodash';

const UserInfo = () => {
  const user = { profile: { name: 'Alice' } };
  return <div>{_.get(user, 'profile.name')}</div>;
};

export default UserInfo;

在webpack.config.js里设置了splitChunks和compressionPlugin：


module.exports = {
  optimization: {
    splitChunks: { chunks: 'all' },
    usedExports: true
  },
  plugins: [
    new CompressionPlugin()
  ]
};

运行npm run build后，打包文件还是有8MB，检查发现lodash全量被包含进去了。尝试过删除node_modules重装，但问题依旧，是不是配置哪里漏了？

我来解答赞 6 收藏

反馈

1 条解答

UX恒菽 Lv1

你这问题挺典型，主要是lodash的引入方式有问题。你现在用的是整体引入import _ from 'lodash'，这种方式会把整个lodash库都打包进去，Tree Shaking在这种情况下是不起作用的。

要解决这个问题，改用按需加载的方式就行。把代码改成这样：

import get from 'lodash/get';



const UserInfo = () => {

  const user = { profile: { name: 'Alice' } };

  return <div>{get(user, 'profile.name')}</div>;

};



export default UserInfo;

另外建议在babel配置里加上lodash插件，能进一步优化。安装babel-plugin-lodash，然后在babel.config.js里添加：

module.exports = {

  presets: ['react-app'],

  plugins: ['lodash']

};

顺带说一句，你现在的webpack配置其实没啥大问题，splitChunks和compressionPlugin都配得挺常规。不过compressionPlugin只是生成gzip文件，不会影响原始打包体积，这个别搞混了。

最后提醒下，删node_modules重装这种操作基本没啥用，省点时间吧。改完上面这些再跑下build，打包体积应该就能降下来了。我之前也被这问题坑过，后来就这么解决的。

2026-02-14 03:03