甲方嫌弃，项目首页加载太慢

有一天，甲方打开一个后台管理的项目，说有点卡，不太满意，项目经理叫我优化，重新打包一下。

从输入地址到展示首屏，最佳时间在 3秒内，否则，甲方挂脸，咱就有可能有被裁的风险，understand?
废话不多说，先来看一下怎么个优化法吧。

优化

✅ cdn

分析

用Webpack Bundle Analyzer分析依赖，安装webpack-bundle-analyzer打包分析插件：

js 复制代码

# NPM
npm install --save-dev webpack-bundle-analyzer

js 复制代码

# Yarn
yarn add -D webpack-bundle-analyzer

反正都是装，看着来。

配一下：

// vue.config.js 文件里。（没有就要新建一下）

js 复制代码

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

打包

执行打包命令并查看分析

js 复制代码

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文件地址拖上去，然后得到一个地址，这样也安全，也方便，但没有的话另说)。

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。：

js 复制代码

<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.12/theme-chalk/index.min.css">
</head>

<body>
<script src="https://cdn.staticfile.org/element-ui/2.15.12/index.min.js"></script>
</body>

所以这样子，就引入好了。接着在main.js里面，把之前import的所有element的样式删掉。

接着，vue.config.js的configureWebpack加个externals字段：

js 复制代码

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 中这样引入：
html 复制代码
```
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
那么 element-ui 会挂载到 window.ELEMENT 上。

为什么这样配置？

通常是为了通过 CDN 引入 element-ui（而不是打包它），从而优化构建速度和体积。
你需要确保在 HTML 中通过 <script> 提前加载了 element-ui，否则运行时 ELEMENT 会是 undefined。

html 复制代码

<!-- HTML 中通过 CDN 引入 element-ui -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

javascript 复制代码

// webpack.config.js
module.exports = {
  externals: {
    'element-ui': 'ELEMENT' // 告诉 Webpack：import 'element-ui' 时，返回全局的 ELEMENT
  }
};

javascript 复制代码

// 你的代码中依然可以正常 import（但实际用的是全局变量）
import ElementUI from 'element-ui';
// 相当于：const ElementUI = window.ELEMENT;

注意事项：

确保全局变量名（ELEMENT）和 element-ui 的 CDN 版本一致。不同版本的库可能有不同的全局变量名。
如果使用模块化打包（如 npm + Webpack 全量打包），则不需要配置 externals。

这里有的伙伴就说，我咋知道是ELEMENT，而不是element呢。

这里是这么找的：

直接在浏览器控制台检查在 HTML 中通过 CDN 引入该库：

html 复制代码

<script src="https://cdn.staticfile.org/element-ui/2.15.12/index.min.js"></script>

打开浏览器开发者工具（F12），在 Console 中输入：

javascript 复制代码

console.log(window);

然后查找可能的全局变量名（如 ELEMENT、ElementUI 等）。

cdn配置之后，重新分析

js 复制代码

npm run build --report

重新用cdn的去分析，

那么就很舒服了，也因此，这个就是cdn优化的方法。

✅ nginx gzip压缩

js 复制代码

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 [email protected] --save-dev

注意版本匹配问题。

vue配置，这段配置是 Webpack 构建中关于 Gzip 压缩 的设置，位于 config/index.js 文件中。:

js 复制代码

//文件路径  config --> index.js
build: {
  productionGzip: true, // 启用生产环境的 Gzip 压缩
  productionGzipExtensions: ['js', 'css'], // 需要压缩的文件类型
}

productionGzip: true
- 作用：开启 Gzip 压缩，减少静态资源（JS、CSS）的体积，提升页面加载速度。
- 要求：需要安装 compression-webpack-plugin（如注释所述）。
  bash 复制代码
```
npm install --save-dev compression-webpack-plugin
```
productionGzipExtensions: ['js', 'css']
- 指定需要压缩的文件扩展名（默认压缩 JS 和 CSS 文件）。

为什么需要 Gzip？

优化性能：Gzip 压缩后的资源体积可减少 60%~70%，显著降低网络传输时间。
服务器支持 ：大多数现代服务器（如 Nginx、Netlify）会自动对静态资源进行 Gzip 压缩，但本地构建时提前生成 .gz 文件可以避免服务器实时压缩的开销。

✅ 按需加载路由

路由级代码分割（动态导入）

js 复制代码

// 原写法
import About from './views/About.vue'

// 优化后写法
const About = () => import(/* webpackChunkName: "about" */ './views/About.vue')

首页只加载核心代码（home路由）
about模块会在用户点击about路由时才加载
显著减少首屏加载资源体积

✅ 合理配置 prefetch策略

javascript 复制代码

// vue.config.js
module.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中的依赖单独打包

javascript 复制代码

config.optimization.splitChunks({
 chunks: 'all',
 cacheGroups: {
   vendors: {
     name: 'chunk-vendors',
     test: /[\\/]node_modules[\\/]/,
     priority: -10,
     chunks: 'initial'
   }
 }
})

✅ 按需引入 lodash

javascript 复制代码

import debounce from 'lodash/debounce'

用啥再引啥。

甲方笑了

打开首页闪电一进，完美ending！！！

散会啦😊