项目越写越大，打包一次喝杯咖啡回来还没好？产出的bundle.js比电影还大？今天我们就来一场Webpack“减肥+提速”双修课。不用焦虑，6招下来，你的打包速度会像换了跑车引擎，产物体积瘦成一道闪电。前言Webpack就像个勤劳的搬运工，但如果你不告诉它“哪些不用搬”、“怎么抄近道”，它会把你整个项目连同node_modules一起扛上，慢得像蜗牛。今天我们就来调教这个搬运工，让打包速度飞起，让产物体积减半。本文分两大块：速度优化（开发时等你）和体积优化（上线时快人一步）。一、速度优化：别让Webpack摸鱼1. 减少Loader和Plugin的工作范围Webpack默认会遍历node_modules，但这里面的代码通常已经编译好了。用exclude告诉它：别管node_modules。module:{rules:[{test:/\.js$/,exclude:/node_modules/,// 跳过node_modulesuse:'babel-loader'}]}同理，Plugin里如果不需要在某个环境下执行，可以动态添加。2. 使用缓存：第二次打包快如闪电babel-loader缓存：cacheDirectory: trueuse:{loader:'babel-loader',options:{cacheDirectory:true}}cache-loader（Webpack5之前）：把结果缓存到硬盘。Webpack5内置缓存：直接开启