Webpack 打包后体积太大怎么办？

极客树行提问于 2026-03-01 15:54:20 阅读 184

前端

我用 Webpack 打了个 React 项目，发现 vendor.js 快 2MB 了，首屏加载特别慢。明明只用了几个库，怎么体积这么大？

我试过配置 splitChunks，但效果不明显，是不是哪里写错了？比如下面这段配置：

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\/]node_modules[\/]/,
        name: 'vendors',
        chunks: 'all',
      }
    }
  }
}

我来解答赞 3 收藏

反馈

1 条解答

博主雨涵 Lv1

兄弟，你这配置只是把代码拆出去了，体积又没变少，该 2MB 还是 2MB。

当时我也卡在这，以为 splitChunks 能瘦身，结果发现它只是把代码分文件存放，该下载的还是得下载。

先装个 webpack-bundle-analyzer 看看到底是哪个库占地方，十有八九是某个库被全量引入了。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;



module.exports = {

  plugins: [

    new BundleAnalyzerPlugin()

  ]

}

跑一下打包，浏览器会自动弹个页面，哪块大一目了然。

说几个我踩过的坑。第一个是 lodash，如果你写的是 import _ from 'lodash'，那整个库全进去了，100多KB。改成 import debounce from 'lodash/debounce' 按需引入，或者配个 lodash-webpack-plugin。

第二个是 moment.js，这玩意儿自带一堆语言包，光语言文件就几百KB。配个 ContextReplacementPlugin 只留中文：

const webpack = require('webpack');



plugins: [

  new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /zh-cn/)

]

第三个，确认下你的 mode 是不是 production，别一直是 development。production 模式会自动开 Tree Shaking 和代码压缩，体积能小不少。

还有个狠招，把 React、ReactDOM 这些大库用 externals 配置从打包里剔除，直接用 CDN 引入：

externals: {

  react: 'React',

  'react-dom': 'ReactDOM'

}

然后在 HTML 里加上对应的 CDN script 标签就行。

最后别忘了开 Gzip 压缩，nginx 配一下或者用 CompressionPlugin，2MB 能压到几百KB，效果立竿见影。

你先用 analyzer 跑一遍，看看具体是啥占地方，再对症下药。

2026-03-01 16:03