前端性能优化：从首屏加载 5秒 优化到 0.5秒，我做了这 6 件事（Webpack 配置实战）

标签：#前端性能优化 #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。
策略：

1. Libs：把node_modules里的东西单独拆出来，因为它们不常变，可以利用浏览器长缓存。
2. 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。

1. JS 摇树：确保使用 ES Modules (import/export) 语法。Webpack 5 在mode: 'production'下自动开启。
2. 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 步“手术”，我们再来看一下数据对比：

Next Step:
立刻在你的项目里运行npm run build --report，看看那张五颜六色的图里，到底是谁在拖慢你的网站！