Webpack打包后bundle体积太大怎么优化？

喧丹🍀 提问于 2026-02-14 22:13:28 阅读 17

优化

最近在优化项目打包体积，用Webpack打包后主chunk还是有3MB多，尝试过配置SplitChunksPlugin分包，但效果不明显。我按照网上的教程设置了common chunk和vendor chunk，但打包后的runtime还是占用了400KB…

尝试过用terser-webpack-plugin压缩，发现生产环境已经默认开启了，但体积下降不到10%。用webpack-bundle-analyzer看到大部分体积被lodash和moment占据，这些库都按需引入了啊？

配置片段：


module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 10000,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30
    }
  },
  devtool: 'source-map'
}

有什么更有效的体积压缩方法？按需加载和Tree Shaking是不是没生效？

我来解答赞 1 收藏

反馈

2 条解答

长孙煜喆 Lv1

先说结论，lodash和moment这种库就算按需引入也容易体积爆炸，建议换成lodash-es和day.js，这两个库天生支持Tree Shaking，拿去改改试试。

你的splitChunks配置太宽松了，minSize设10000确实容易把小模块都打进一个包。改成这样：

module.exports = {

  optimization: {

    splitChunks: {

      chunks: 'all',

      minSize: 30000,

      maxSize: 50000,

      minChunks: 2,

      cacheGroups: {

        vendors: {

          test: /[\/]node_modules[\/]/,

          priority: -10

        },

        default: {

          minChunks: 2,

          priority: -20,

          reuseExistingChunk: true

        }

      }

    }

  }

}

另外source-map在生产环境没必要开，devtool改成'hidden-source-map'或者干脆去掉。

还有几个建议：
- 把babel-loader的exclude加上node_modules
- 开启image-webpack-loader压缩图片资源
- runtimeChunk单独抽离：runtimeChunk: { name: 'manifest' }

最后提醒一句，别光看打包后的总大小，重点关注首屏加载的chunk体积。用preload-webpack-plugin预加载关键资源，非首屏的异步组件记得动态import。这些招数用下来，体积至少能减一半。

2026-02-16 17:16

令狐志亮 Lv1

lodash和moment这种库就算按需引入也容易体积膨胀，建议直接换成lodash-es和dayjs，前者支持Tree Shaking，后者天生就小得多。把devtool改成'hidden-source-map'，source-map占的体积可不小。另外你splitChunks的minSize设置太小了，改成30000，让分包更合理。

module.exports = {

  optimization: {

    splitChunks: {

      chunks: 'all',

      minSize: 30000,

      minChunks: 1,

      maxAsyncRequests: 30,

      maxInitialRequests: 30

    }

  },

  devtool: 'hidden-source-map'

}

我之前也踩过这坑，换库是最立竿见影的。

2026-02-14 22:18