甲方嫌弃，项目首页加载太慢
jack_po约 5 分钟有一天，甲方打开一个后台管理的项目，说有点卡，不太满意，项目经理叫我优化，重新打包一下。
从输入地址到 展示 首屏，最佳时间在 3 秒内，否则甲方挂脸，咱就有可能有被裁的风险，understand?
❝废话不多说，先来看一下怎么个优化法吧。
❞
优化
✅ cdn
分析
用 Webpack Bundle Analyzer 分析依赖，安装 webpack-bundle-analyzer 打包分析插件：
# NPMnpm install --save-dev webpack-bundle-analyzer
# Yarnyarn add -D webpack-bundle-analyzer
反正都是装，看着来。
配一下：
// vue.config.js 文件里。（没有就要新建一下）
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {plugins: [new BundleAnalyzerPlugin()]}
打包
执行打包命令并查看分析
npm run build --report打包结束后，会在项目根目录下生成 dist 文件。自动跳到127.0.0.1:8888（没有跳的话，手动打开 dist 文件夹下的 report.html），这个网址就是打包分析报告。
占得比较大的块，就是 Element UI 组件库和 echarts 库占的空间比相对较大。
这就要考虑，第一，要按需，要啥再用啥，不要一股脑啥都装。按需安装，按需加载。
第二，考虑单独引入这些组件库的cdn，这样速度也会咔咔提升。
详细讲一下怎么搞cdn。
按需大家都知道，要啥再引入啥，再装啥。
比如element-ui，我要uninstall掉，然后呢，去引入 cdn，不要装库了，用 cdn。
去package.json里面看element-ui装了啥版本，然后看完之后，就npm uninstall element-ui卸载掉。
去 cdn 库里面去找https://www.staticfile.org/，(首先先说一下，要找免费的开放的那种，因为一般有的公司没有自家的 cdn，没有自家的桶，有的话，直接把 js 文件地址拖上去，然后得到一个地址，这样也安全，也方便，但没有的话另说)。
样式库: https://cdn.staticfile.org/element-ui/2.15.12/theme-chalk/index.min.css组件库：https://cdn.staticfile.org/element-ui/2.15.12/index.min.js
然后去public/index.html入口文件中，去加入这个东西，像咱以前写原生一样引入就好, body 里面引入 js，head 里面引入 css。：
<head><linkrel="stylesheet"href="https://cdn.staticfile.org/element-ui/2.15.12/theme-chalk/index.min.css"></head><body><scriptsrc="https://cdn.staticfile.org/element-ui/2.15.12/index.min.js"></script></body>
所以这样子，就引入好了。接着在main.js里面，把之前import的所有element的样式删掉。
接着，vue.config.js的configureWebpack加个externals字段：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {plugins: [new BundleAnalyzerPlugin()],externals: {'element-ui': 'ELEMENT' // key 是之前install下下来的包名，element-ui。value是全局变量名(ELEMENT)}}
「externals」: Webpack 的 externals 配置用于声明某些依赖应该从外部获取，而不是打包到最终的 bundle 中。这样可以减小打包体积，前提是这些依赖已经在运行环境中存在。
「'element-ui': 'ELEMENT' 的含义」
当你的代码中 import 'element-ui'时，Webpack 不会打包element-ui，而是会从全局变量ELEMENT中获取它。ELEMENT是element-ui库通过<script>标签引入时，在全局（window）中暴露的变量名。
例如，如果你在 HTML 中这样引入：
<scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script>那么 element-ui 会挂载到 window.ELEMENT 上。
「为什么这样配置？」
通常是为了通过 CDN 引入 element-ui（而不是打包它），从而优化构建速度和体积。你需要确保在 HTML 中通过 <script>提前加载了element-ui，否则运行时ELEMENT会是undefined。
<!-- HTML 中通过 CDN 引入 element-ui --><scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script>
// webpack.config.jsmodule.exports = {externals: {'element-ui': 'ELEMENT' // 告诉 Webpack：import 'element-ui' 时，返回全局的 ELEMENT}};
// 你的代码中依然可以正常 import（但实际用的是全局变量）import ElementUI from 'element-ui';// 相当于：const ElementUI = window.ELEMENT;
「注意事项：」
确保全局变量名（ ELEMENT）和element-ui的 CDN 版本一致。不同版本的库可能有不同的全局变量名。如果使用模块化打包（如 npm + Webpack 全量打包），则不需要配置 externals。
这里有的伙伴就说，我咋知道是ELEMENT，而不是element呢。
这里是这么找的：
直接在浏览器控制台检查 在 HTML 中通过 CDN 引入该库：
<scriptsrc="https://cdn.staticfile.org/element-ui/2.15.12/index.min.js"></script>打开浏览器开发者工具（F12），在 Console 中输入：
console.log(window);然后查找可能的全局变量名（如 ELEMENT、ElementUI 等）。
cdn 配置之后，重新分析
npm run build --report重新用cdn的去分析，
那么就很舒服了，也因此，这个就是 cdn 优化的方法。
✅ nginx gzip 压缩
server {listen 8103;server_name ************;# 开启gzipgzip on;# 进行压缩的文件类型。gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;# 是否在http header中添加Vary: Accept-Encoding，建议开启gzip_vary on;}
✅vue gzip 压
安包：npm i [email protected] --save-dev
注意版本匹配问题。
vue 配置，这段配置是 Webpack 构建中关于 「Gzip 压缩」 的设置，位于 config/index.js 文件中。:
//文件路径 config --> index.jsbuild: {productionGzip: true, // 启用生产环境的 Gzip 压缩productionGzipExtensions: ['js', 'css'], // 需要压缩的文件类型}
「
productionGzip: true」
作用：开启 Gzip 压缩，减少静态资源（JS、CSS）的体积，提升页面加载速度。 要求：需要安装 compression-webpack-plugin（如注释所述）。
npm install --save-dev compression-webpack-plugin「
productionGzipExtensions: ['js', 'css']」
指定需要压缩的文件扩展名（默认压缩 JS 和 CSS 文件）。
「为什么需要 Gzip？」
「优化性能」：Gzip 压缩后的资源体积可减少 60%~70%，显著降低网络传输时间。 「服务器支持」：大多数现代服务器（如 Nginx、Netlify）会自动对静态资源进行 Gzip 压缩，但本地构建时提前生成 .gz文件可以避免服务器实时压缩的开销。
✅ 按需加载路由
路由级代码分割（动态导入）
// 原写法import About from './views/About.vue'// 优化后写法const About = () => import(/* webpackChunkName: "about" */ './views/About.vue')
首页只加载核心代码（home 路由） about 模块会在用户点击 about 路由时才加载 显著减少首屏加载资源体积
✅ 合理配置 prefetch 策略
// vue.config.jsmodule.exports = {chainWebpack: config => {// 移除prefetch插件config.plugins.delete('prefetch')// 或者更精细控制config.plugin('prefetch').tap(options => {options[0].fileBlacklist = options[0].fileBlacklist || []options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)return options})}}
「禁用 prefetch」：减少不必要的带宽消耗，但可能增加后续路由切换等待时间 「启用 prefetch」：利用浏览器空闲时间预加载，提升用户体验但可能浪费带宽 「折中方案」：只对关键路由或高概率访问的路由启用 prefetch
✅splitChunks 将 node_modules 中的依赖单独打包
「拆分 vendor」：将 node_modules 中的依赖单独打包
config.optimization.splitChunks({chunks: 'all',cacheGroups: {vendors: {name: 'chunk-vendors',test: /[\\/]node_modules[\\/]/,priority: -10,chunks: 'initial'}}})
✅ 按需引入 lodash
import debounce from 'lodash/debounce'用啥再引啥。
甲方笑了
打开首页闪电一进，完美 ending！！！
散会啦😊