标签：#前端性能优化 #Webpack5 #Vue/React #加载速度 #工程化
🐢 前言：那个 5MB 的 main.js
在优化前，我们面临的情况是这样的：
- 现象：打开网页，白屏转圈，Network 里
app.js下载耗时 3 秒，解析耗时 2 秒。 - 原因：所有的第三方库（React/Vue, ECharts, Lodash）和业务代码全都打包进了一个文件里。
- 目标：分包、压缩、按需加载。
优化前后构建流程对比 (Mermaid):
🔬 第一步：知己知彼 —— 构建分析
盲目优化是原本。首先，我们需要知道到底是谁占用了体积。
引入webpack-bundle-analyzer插件，它能生成一张可视化的体积分布图。
// vue.config.js 或 webpack.config.jsconstBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports={plugins:[// 打包时运行: npm run build --reportnewBundleAnalyzerPlugin()]}诊断结果：发现ECharts、ElementUI和Moment.js占了 80% 的体积，且被打包在主包中。
📦 第二步：拆！—— SplitChunks 分包策略
这是 Webpack 优化的核心。默认配置太保守，我们需要自定义optimization.splitChunks。
策略：
- Libs：把
node_modules里的东西单独拆出来，因为它们不常变，可以利用浏览器长缓存。 - Commons：把业务中被多处引用的公共组件拆出来。
// webpack.config.jsoptimization:{splitChunks:{chunks:'all',// 对同步和异步代码都进行分割cacheGroups:{// 1. 第三方库单独打包libs:{name:'chunk-libs',test:/[\\/]node_modules[\\/]/,priority:10,chunks:'initial'// 只打包初始时依赖的第三方},// 2. 单独把过大的库拆出来 (如 ECharts)echarts:{name:'chunk-echarts',priority:20,test:/[\\/]node_modules[\\/]_?echarts(.*)/},// 3. 公共组件commons:{name:'chunk-commons',minChunks:2,// 被引用 2 次以上就提取priority:5,reuseExistingChunk:true}}}}效果：main.js从 5MB 变成了 200KB，其他的变成了chunk-libs.js(2MB) 和chunk-echarts.js(1MB)。虽然总积没变，但利用了浏览器并行下载。
✂️ 第三步：摇！—— Tree Shaking (摇树优化)
虽然拆包了，但代码里还有很多“死代码”。比如引入了lodash却只用了cloneDeep，引入了ElementUI却只用了Button。
- JS 摇树：确保使用 ES Modules (
import/export) 语法。Webpack 5 在mode: 'production'下自动开启。 - CSS 摇树：使用
purgecss-webpack-plugin，把没用到的 CSS 样式删掉。
关键点：检查package.json中的sideEffects。
"sideEffects":["*.css","*.less"]// 告诉 Webpack：除了 CSS 文件，其他 JS 文件如果没有导出，可以放心删掉。☁️ 第四步：甩！—— CDN 引入 (Externals)
有些库实在太大了（如 React, Vue, ReactDOM），而且极其稳定。
我们可以直接用CDN的链接，完全不让它们进入 Webpack 的打包流程。
// 1. webpack.config.jsexternals:{'vue':'Vue','vue-router':'VueRouter','axios':'axios','echarts':'echarts'}// 2. index.html (手动引入 CDN)// <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0/vue.global.min.js"></script>效果：构建体积瞬间减少1.5MB！且利用了公共 CDN 的缓存。
🗜️ 第五步：压！—— Gzip / Brotli 压缩
浏览器下载 1MB 的文本文件是很慢的，但如果压缩成.gz，可能只有 200KB。
我们在构建时就直接生成.gz文件，让 Nginx 直接传输，省去服务器实时压缩的 CPU 开销。
// npm install compression-webpack-plugin --save-devconstCompressionPlugin=require('compression-webpack-plugin');plugins:[newCompressionPlugin({algorithm:'gzip',test:/\.(js|css|html|svg)$/,threshold:10240,// 大于 10KB 才压缩minRatio:0.8})]Nginx 配合配置：
gzip_static on; # 优先查找 .gz 文件🛣️ 第六步：懒！—— 路由懒加载
首页不需要加载“个人中心”的代码，也不需要加载“设置页”的代码。
利用 Webpack 的Dynamic Import特性。
// ❌ 以前的写法 (同步引入)// import UserCenter from './views/UserCenter.vue';// ✅ 优化后 (异步引入，Webpack 会自动将其生成一个单独的 JS 文件)constUserCenter=()=>import(/* webpackChunkName: "user" */'./views/UserCenter.vue');constroutes=[{path:'/user',component:UserCenter}]📊 总结：优化成果
经过以上 6 步“手术”，我们再来看一下数据对比：
| 指标 | 优化前 | 优化后 | 提升 |
|---|---|---|---|
| 包体积 (Total) | 5.8 MB | 1.2 MB | ↓ 79% |
| main.js 体积 | 5.2 MB | 180 KB | ↓ 96% |
| FCP (首屏绘制) | 5.2s | 0.5s | ↑ 10倍 |
| Lighthouse 评分 | 35 (Red) | 92 (Green) | High |
Next Step:
立刻在你的项目里运行npm run build --report，看看那张五颜六色的图里，到底是谁在拖慢你的网站！
