甲方嫌弃，项目首页加载太慢 点击关注公众号，“技术干货” 及时达！有一天，甲方打开一个后台管理的项目，说有点卡，不太满意，项目经理叫我优化，重新打包一下。 从输入地址到展示首屏，最佳时间在3秒内，否则甲方挂脸，咱就有可能有被裁的风险，understand? ?废话不多说，先来看一下怎么个优化法吧。 ?优化? cdn分析用 Webpack Bundle Analyzer 分析依赖，安装 webpack-bundle-analyzer 打包分析插件： # NPMnpminstall --save-dev webpack-bundle-analyzer# Yarnyarnadd-D webpack-bundle-analyzer反正都是装，看着来。 配一下： // vue.config.js 文件里。（没有就要新建一下） constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports= {plugins: [ newBundleAnalyzerPlugin() ]}打包执行打包命令并查看分析 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。： headlinkrel="stylesheet"href="https://cdn.staticfile.org/element-ui/2.15.12/theme-chalk/index.min.css"/head bodyscriptsrc="https://cdn.staticfile.org/element-ui/2.15.12/index.min.js"/script/body所以这样子，就引入好了。接着在main.js里面，把之前import的所有element的样式删掉。 接着，vue.config.js的configureWebpack加个externals字段： constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports= {plugins: [ newBundleAnalyzerPlugin() ],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（但实际用的是全局变量）importElementUIfrom'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 ************;# 开启gzip gzip 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 compression-webpack-plugin@1.1.12 --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-devcompression-webpack-plugin「productionGzipExtensions: ['js', 'css']」 指定需要压缩的文件扩展名（默认压缩 JS 和 CSS 文件）。「为什么需要 Gzip？」 「优化性能」：Gzip 压缩后的资源体积可减少 60%~70%，显著降低网络传输时间。「服务器支持」：大多数现代服务器（如 Nginx、Netlify）会自动对静态资源进行 Gzip 压缩，但本地构建时提前生成.gz文件可以避免服务器实时压缩的开销。? 按需加载路由路由级代码分割（动态导入） // 原写法importAboutfrom'./views/About.vue' // 优化后写法constAbout= () =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$/) returnoptions }) }}「禁用 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' }}})? 按需引入 lodashimportdebouncefrom'lodash/debounce'用啥再引啥。 甲方笑了打开首页闪电一进，完美 ending！！！ 散会啦?? AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文