博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》Webpack配置错打包慢到哭—— 一个让前端崩溃的真实案例目录项目一跑Webpack打包时间从5分钟飙到30分钟。老板在群里问“咋还没好”我盯着终端心在滴血。这破配置又犯了老毛病。问题报错不是报错是慢到窒息。每次改个代码等半天才出包。用webpack --profile看发现compilation阶段卡在90%。我翻了配置一堆loader但没缓存。核心根源Webpack默认不缓存。每次打包它都重新编译所有模块。尤其项目大了像我这种用React的组件多编译慢得像老牛拉破车。更坑的是有人把devtool: eval-source-map写在生产配置里——这玩意儿会生成超大source map拖慢打包。还有exclude: /node_modules/没写loader瞎转node_modules里的库纯纯浪费CPU。解决代码对比错误和正确配置// 错误配置没缓存source map乱开module.exports{entry:./src/index.js,output:{path:path.resolve(__dirname,dist),filename:bundle.js},devtool:eval-source-map,// 生产环境别用这个module:{rules:[{test:/\.js$/,use:babel-loader// 没排除node_modules全量转}]}};// 正确配置加缓存优化source mapconstpathrequire(path);const{CleanWebpackPlugin}require(clean-webpack-plugin);module.exports{entry:./src/index.js,output:{path:path.resolve(__dirname,dist),filename:bundle.js},// 关键启用文件系统缓存cache:{type:filesystem,// 用文件系统缓存buildDependencies:{config:[__filename]// 依赖配置文件}},// 生产环境用cheap-module-source-mapdevtool:cheap-module-source-map,module:{rules:[{test:/\.js$/,use:babel-loader,exclude:/node_modules/// 排除node_modules别让loader瞎转}]},optimization:{splitChunks:{// 代码分割chunks:all}}};加了cache后第二次打包快了3倍。devtool也改了生产环境别用eval-source-map。避坑总结用cache: { type: filesystem }省时省力。不加它每次打包都重头编译。生产环境别用eval-source-map用cheap-module-source-map——文件小打包快。exclude: /node_modules/必须写否则loader转node_modules里的库纯纯浪费。optimization.splitChunks别漏大项目分包能提速50%。记住Webpack不是魔法配置错了它比你更慢。下次再慢先看配置别瞎等。我昨天调了3小时就为这破配置——现在打包1分钟搞定老板终于不催了。爽