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

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

前端

我用 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 收藏

反馈

1 条解答

红霞 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