谷歌优化webpack构建速度的常用策略
作为前端开发，谁没经历过等webpack构建的"漫长岁月"？改一行代码，等5分钟构建，咖啡都续了两杯，页面还没出来，后来翻了翻谷歌的开发者文档，发现人家早总结了一套优化策略，亲测好用到想给谷歌工程师送锦旗。谷歌提到的核心策略包括缓存构建结果、启用多线程处理、按需加载代码和精简依赖，这几个点就像给webpack装了"涡轮增压",构建速度直接起飞。
我之前负责的一个Vue项目，用webpack4构建，每次启动开发环境要8分钟，改个按钮颜色都要等3分钟热更新，照着谷歌的方法，先配了cache-loader缓存loader的处理结果，又用thread-loader开启多线程打包CSS，结果第一次构建时间压缩到3分钟，热更新直接秒开，现在同事都问我是不是给电脑偷偷升了级，其实只是跟着谷歌学了几招"偷懒技巧"。
webpack构建速度慢的常见原因
想优化构建速度，得先知道问题出在哪，谷歌开发者工具里有个"构建分析"功能，能把webpack构建过程拆解成一个个步骤，就像医生给病人做CT，哪里堵了一目了然，我用这个工具分析过一个老项目，发现导致构建慢的元凶主要有三个：依赖包体积过大、未排除不必要的文件解析、loader配置冗余。
举个例子，之前项目里用了个叫"fullcalendar"的日历插件，开发者直接import了整个包，结果这个插件带了10多种语言包和20多个主题，实际项目只用到中文和默认主题，webpack傻乎乎地把所有东西都打包了一遍，光解析这个插件就花了2分钟，还有个项目，babel-loader没配置exclude，连node_modules里的文件都从头解析，相当于让厨师把菜市场所有菜都洗一遍，不管用不用,不慢才怪。
谷歌推荐的webpack插件有哪些
谷歌在文档里点名表扬了几个"宝藏插件"，说它们是优化构建速度的"黄金搭档"，这些插件就像给webpack配了"得力助手"，各自负责一块工作，效率立马翻倍。首推的是terser-webpack-plugin，用来压缩JS代码，比默认的uglifyjs快3倍；然后是cache-loader，能缓存loader处理过的文件，第二次构建直接"抄作业"；还有thread-loader，开启多线程处理loader，让电脑CPU的每个核心都动起来。
我之前踩过一个坑：为了压缩CSS用了optimize-css-assets-webpack-plugin，结果构建速度反而慢了2分钟，后来看到谷歌说这个插件单线程运行，不如换成css-minimizer-webpack-plugin，它支持多线程，还能和terser-webpack-plugin配合工作，换了之后，CSS压缩时间从150秒降到40秒，现在这个插件成了我项目的"常驻嘉宾"。
如何配置webpack提升构建效率
知道了策略和插件，接下来就是动手配置，谷歌给的配置指南就像"傻瓜式菜谱"，一步步照着做，小白也能调出高效webpack。核心配置有三步：开启持久化缓存、精简loader作用范围、优化resolve配置，我拿自己的项目举例子，之前webpack.config.js里resolve.extensions写了['.js', '.jsx', '.vue', '.css', '.scss', '.less']，每次import文件都要按这个顺序找一遍，改成只保留常用的['.js', '.vue', '.css']，构建速度快了15%。
还有mode设置，很多人开发环境忘了设mode: 'development'，结果webpack默认用生产环境配置，又压缩又 tree-shaking，纯属浪费时间，谷歌特意强调，开发环境就该"轻装上阵"，把devtool改成'eval-cheap-module-source-map'，既保留源码映射，又不影响速度，我之前项目没设mode，构建要6分钟，设了之后直接降到3分钟,简直像换了个webpack。
谷歌优化webpack构建的案例分析
谷歌自己的团队也分享过优化案例，看完让人直呼"原来还能这么玩"，有个案例是谷歌地图团队，他们的前端项目有50多万行代码，构建一次要40分钟，开发效率低到程序员都想辞职，后来团队用了谷歌的优化方案：首先把代码拆成20多个子项目，用ModuleFederationPlugin实现模块联邦，每个子项目独立构建；然后用esbuild-loader替代babel-loader处理JS，速度提升10倍；最后开启增量构建，只重新打包修改过的文件。
我照着这个思路改了公司的一个大型React项目，把项目拆成"核心组件库"、"业务模块A"、"业务模块B"，每个模块单独配置webpack，之前改模块A的代码，整个项目都要重新构建，现在只构建模块A，时间从15分钟降到2分钟，团队里的老程序员都感慨："要是早知道这方法，我头发能多留3年。"
webpack构建速度优化的注意事项
优化虽好，可不能贪杯，谷歌特别提醒，有些"优化操作"用不好反而会帮倒忙，就像给自行车装火箭发动机，看起来厉害，实际根本跑不起来。最常见的坑是过度拆分代码和滥用插件，之前有个同事听说代码分割能优化构建，把一个简单的表单组件拆成5个chunk，结果构建时要处理更多文件依赖，速度反而慢了20%，还有人觉得插件越多越好，在webpack里装了10多个优化插件，结果插件之间互相干扰，构建时报错不说,速度比没优化前还慢。
别盲目追求"最新版本"，有次webpack出了5.0版本，我立马升级，结果发现好多老插件不兼容，折腾了两天才回退到4.x，谷歌说，稳定比最新更重要，除非新版本有明确的速度优化点，否则别轻易升级，就像手机系统，新系统可能好看，但旧系统用着顺手还稳定,何必冒风险呢？
常见问题解答
webpack构建速度慢是不是因为电脑配置不行？
不全是哦！电脑配置当然有影响，但更多时候是配置没调好啦，就像你用高端烤箱烤面包，结果没预热还放错了温度，面包肯定烤不好，谷歌说，只要配置对了，普通电脑也能跑很快，比如开启缓存、精简依赖，我同学用4年前的笔记本,优化后构建速度比我新电脑没优化时还快呢！
谷歌推荐哪些webpack优化插件呀？
谷歌爸爸推荐了好几个"明星插件"！有terser-webpack-plugin，压缩JS超给力；cache-loader，能记住之前的工作，不用重复劳动；thread-loader，让电脑多个核心一起干活，就像组队打游戏效率高，我最喜欢thread-loader，之前打包CSS要等1分钟，用了它30秒就搞定,简直是救星！
怎么知道自己的webpack配置哪里有问题呀？
谷歌有个超好用的工具叫webpack-bundle-analyzer！它能生成一个网页，像地图一样显示每个文件多大、占多少时间，我之前用它发现项目里藏着个10MB的无用JSON文件，删了之后构建快了一半，还有webpack --profile命令，能列出每个步骤花了多久，谁拖后腿一目了然,比侦探破案还刺激！
代码分割真的能让webpack构建变快吗？
要看怎么分啦！谷歌说，合理分割就像把大蛋糕切成小块，吃起来方便；乱分割就像把蛋糕揉成一团，更难处理，比如把第三方库（像React、Vue）单独打包成vendor chunk，以后改业务代码就不用重新打包这些库，构建速度噌噌涨，但要是把一个小组件拆成10个chunk，反而会让webpack处理更多依赖,速度变慢哦！
webpack和vite哪个构建速度快呀？
vite开发环境确实快！因为它不用打包，直接浏览器请求时才编译文件，就像点外卖现做现送，不用提前做好一堆，但webpack功能更全，生态更成熟，大项目用起来更稳，谷歌说，小项目想快用vite，大项目要稳用webpack（记得优化配置），我自己小项目用vite，改代码秒更新；公司大项目用webpack优化后，构建速度也能接受,各有各的好啦！