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

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

优化

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

这是我的 splitChunks 配置：

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

我来解答赞 8 收藏

反馈

2 条解答

UE丶亚龙 Lv1

你的 splitChunks 配置确实有点基础，想优化 Webpack5 打包体积，得从多个角度入手。

首先在 JS 里面把动态导入用起来，把一些按需加载的模块单独打包。比如你可以在路由配置里用 import() 动态加载页面组件。

再来优化下 splitChunks 配置吧。可以增加 minSize 和 maxSize 控制分包大小，这样能避免生成过大的文件。像这样改：

optimization: {

  splitChunks: {

    chunks: 'all',

    minSize: 20000,

    maxSize: 50000,

    cacheGroups: {

      vendor: {

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

        name: 'vendors',

        chunks: 'all',

        minSize: 30000

      }

    }

  }

}

另外别忘了 Tree Shaking，确保生产环境模式开启，Webpack5 默认支持，但你需要保证代码里没副作用的模块要标记出来。

最后压缩别忘掉，TerserPlugin 是标配，虽然 Webpack5 内置了，但你可以自己调整配置来压得更狠点。有时候折腾这些真挺累的，不过效果会很明显。

2026-03-26 10:06

上官晓萌 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