前言解读

当在部署访问 SPA单页面应用 时需要一次性加载所有前端资源，导致文件体积较大。这会增加加载时间并增耗用户的带宽

在 vue项目中，会将我们的所有生产环境第三方依赖打包 chunk-vendors.js 文件中，如引入的库众多，那这个文件则会变大，在游览器加载这个文件时所花费的时间也会更长

让 vue 这类的单页面应用项目体验极差

首次加载或者刷新页面时出现白屏要等待许久的时间，让用户产生这个网站很卡的错觉

如果优化这个速度呢？

首先来分析一下打包出来的 dist 文件

打包资源分析

但是打包出来的文件都是经过加密处理的，怎么知道这些打包的文件哪些是

如果是 vue-cli 脚手架直接在打包命令后面加上 --report 即可，vue-cli 已经集成内置解析工具

在dist目录会生成一个 report.html, 直接打开即可

js 复制代码

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --report",
    "lint": "vue-cli-service lint"
},

或者使用 **webpack **脚手架安装 webpack-bundle-analyzer 可视化资源分析工具

js 复制代码

npm install webpack-bundle-analyzer -D

可以详细看到哪些依赖文件占据了大部分空间

来测试一下未优化时挂在服务器部署后加载的速度

在游览器控制台中使用 performance.timing.loadEventEnd 和 performance.timing.navigationStart 来获取页面加载所需的总时间

performance.timing.loadEventEnd 表示浏览器加载完页面上的所有资源（如图像、CSS、JavaScript 等）的时间点。它表示浏览器完成了页面加载的所有工作，并且可以开始对页面进行渲染和交互。
performance.timing.navigationStart 表示浏览器开始加载页面的时间点。它表示浏览器接收到请求并开始加载页面的第一个字节的时间点。

页面总加载时间为3.8秒，从网络看到仅是加载 chunk-vendors.js 就花费了 2.4 秒，这还是测试的demo项目情况下，如果是真实的项目，加载时间可能会更长

这种情况下，就必须要进行优化了

本篇文章主要讲讲gzip压缩的使用

gzip压缩

1、nginx 开启

在部署前端页面的nginx服务中，修改server项配置，以开启gzip压缩

js 复制代码

server {
    listen       8080;
    server_name  ************;
 
    # 开启gzip
    gzip on;
    # 进行压缩的文件类型。
	gzip_types text/plain text/css application/javascript application/json;
	# 是否在http header中添加Vary: Accept-Encoding，建议开启
	gzip_vary on;
	# 允许使用预压缩的 .gz 文件
	gzip_static on;
	# 设置 Gzip 压缩级别
	gzip_comp_level 5;
	# 设置响应数据的最小长度以启用 Gzip 压缩
	gzip_min_length 256;
	# 指定启用压缩的代理列表
	gzip_proxied any;
	# 禁用 Gzip 压缩的浏览器 User-Agent 列表
	gzip_disable "msie6";
	# 配置内存缓冲区的数量和大小
	gzip_buffers 16 8k;
    
}

2、vue2 + vue-cli 项目中配置

脚手架使用的是vue-cli的情况

安装 compression-webpack-plugin 压缩插件

js 复制代码

npm i compression-webpack-plugin@5.0.2 --save-dev

注意这里的版本为 @5.0.2 ，适配 webpack 4，如果使用最新的版本可能导致安装失败，注意版本冲突

然后在vue.config.js中进行插件配置

json 复制代码

//引入gzip插件
const CompressionPlugin  = require("compression-webpack-plugin");

module.exports = {
  // 部署应用包时的基本 URL
  publicPath: "./",
  // 是否需要生产环境的 source map（源映射文件，帮助开发者在浏览器的开发者工具中，将错误和日志定位到原始代码的具体位置）
  productionSourceMap: false,
  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: true,
  // 是否在开发下通过eslint-loader在每次保存时lint代码， 需要安装@vue/cli-plugin-eslint
  lintOnSave: true,
  // webpack额外配置
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        algorithm: 'gzip',
        test: /\.(js|css|html|svg)$/, // 匹配文件名
        deleteOriginalAssets: false, // 不删除源文件
        threshold: 1024, // 对超过1k的数据压缩
        minRatio: 0.8, // 压缩比
      }),
    ],
  }
}

配置后打包并保留未压缩的源文件对比

依赖包chunk-vendors.js文件从 1.2m 多变成了 300kb 左右

3、vue3 + vite 项目中配置

安装 **vite **压缩插件 vite-plugin-compression

js 复制代码

npm i vite-plugin-compression --save-dev

在 vite.config.js 文件中添加以下配置：

js 复制代码

import compression from 'vite-plugin-compression'

export default {
  plugins: [
    compression({
      algorithm: 'gzip', // 压缩算法，可选['gzip'，'brotliCompress'，'deflate'，'deflateRaw']
      threshold: 10240, // 如果体积大于10kb阈值，则进行压缩，参数单位为b
    }),
  ],
}