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

码农雅涵提问于 2026-03-12 00:14:23 阅读 200

前端

我用 Webpack 打了个 React 项目，结果 vendor.js 快 2MB 了，页面加载特别慢，有没有什么靠谱的优化方法？

我已经试过配置 splitChunks，但效果不明显。还用了 compression-webpack-plugin 开启 gzip，但首屏还是卡。

这是我的 splitChunks 配置：

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

是不是哪里没配对？或者还有别的手段能减小打包体积？比如动态导入或者 Tree Shaking 没生效？

打包优化构建工具

我来解答赞 5 收藏

反馈

2 条解答

欧阳秀云 Lv1

vendor.js 大主要是 node_modules 里的依赖太多，你的 splitChunks 配置基本没问题，但可以再优化下。先把 vendor 分离出来后，还得注意一些细节。

先确认 Tree Shaking 生效了没，确保生产模式下打包，在 webpack.config.js 加上 mode: 'production'。Tree Shaking 主要靠这个模式自动去掉未引用代码。

动态导入也很关键，对于那些不常用的组件，比如报表模块，可以用 React.lazy 和 Suspense 实现按需加载。像这样：

const Report = React.lazy(() => import('./Report'));

function App() {

  return (

    Loading...

别忘了用 TerserPlugin 压缩 JS，Webpack 4+ 自带的压缩工具可能不够强。在 plugins 里加个配置：

const TerserPlugin = require('terser-webpack-plugin');

optimization: {

  minimize: true,

  minimizer: [new TerserPlugin()],

}

还有个老生常谈的就是检查第三方库有没有冗余，有些库可能是全量引入了，实际只用到一小部分功能，看看能不能换成轻量级的替代品。折腾这么多之后应该能明显看到体积降下来。

2026-03-31 10:00

红霞 Dev Lv1

问题大概率出在你没做路由懒加载，光拆vendor没用。

先检查代码里是不是用了静态import，如果路由组件都是同步加载的，拆再多chunk也没用。

改用动态import懒加载路由：

// 路由配置改成这样
const Home = () => import(/ webpackChunkName: "home" / './pages/Home');
const Detail = () => import(/ webpackChunkName: "detail" / './pages/Detail');

然后splitChunks要更细，把react、react-dom这些大块头单独拆：

optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
react: {
test: /[\/]node_modules[\/](react|react-dom|scheduler)[\/]/,
name: 'react-vendor',
priority: 20,
},
vendors: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
priority: 10,
},
},
},
},

还有几个常见坑：确认webpack运行在production模式（mode: 'production'），检查package.json有没有sideEffects配置确保Tree Shaking生效，用babel的话确保用了按需引入（babel-plugin-import），lodash这种大库用lodash-es或只引入用到的函数。

最后用webpack-bundle-analyzer看看具体是哪些模块占空间，一目了然。

2026-03-12 01:01