Webpack5打包体积太大怎么优化？

建英 Dev 提问于 2026-03-12 22:03:17 阅读 2

优化

我用 Webpack5 打了个 React 项目，发现 vendor.js 有 2MB 多，首屏加载特别慢。已经开了 optimization.splitChunks，但效果不明显，是不是配置写得不对？

这是我的 splitChunks 配置：

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

我来解答赞 0 收藏

反馈

1 条解答

上官晓萌 Lv1

你的配置问题在于：只分出了一个vendor包，里面所有node_modules都堆在一起了，2MB多就是这个原因。

先装个分析工具看看到底是哪些库占空间：

npm install webpack-bundle-analyzer --save-dev

在webpack配置里加上：

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



module.exports = { plugins: [

    new BundleAnalyzerPlugin()

  ]

};

跑完打包会弹个窗口，你一看就知道哪个库体积离谱。

针对你的配置，改成下面这样：

optimization: {

  splitChunks: {

    chunks: 'all',

    cacheGroups: {

      // React核心库单独抽离

      react: {

        test: /[\/]node_modules[\/](react|react-dom|scheduler)[\/]/,

        name: 'react-vendor',

        chunks: 'all',

        priority: 30,

      },

      // 其他node_modules

      vendor: {

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

        name: 'vendors',

        chunks: 'all',

        priority: 10,

      }

    }

  }

}

priority是关键，数字大的先匹配，这样react和react-dom会被单独抽出来。

另外检查几点：

1. 生产环境有没有开mode: 'production'，没开的话minification不会生效
2. 用了antd之类的UI库吗？如果用了，加babel-plugin-import按需加载，能小很多
3. lodash是不是整个import了？改成lodash/es来tree shaking

先跑一下bundle analyzer，看看是哪个库在搞事情。

2026-03-12 22:11