Gzip首屏加载缓慢/刷新后加载缓慢

1.Vue配置compression-webpack-plugin实现Gzip压缩

gzip简介
HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。

简单来说，gzip是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多。

客户端和服务器之间是如何通信来支持gzip

2.安装引入安装compression-webpack-plugin

npm i compression-webpack-plugin@5.0.1 -D // 5.0.1版本合适

对应的依赖包

3.?vue.config.js 配置插件compression-webpack-plugin

// 引用插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['html', 'js', 'css']

vueConfig.configureWebpack.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
      '\\.(' + productionGzipExtensions.join('|') + ')$'
    ),
    threshold: 10240, // 只有大小大于该值的资源会被处理 10240
    minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
    deleteOriginalAssets: false // 删除原文件
  }))

?4.npm run build 打包查看是否成功 ，文件后缀.gz

5.nginx 启用 gzip

http {
server {
location / {
# 启用 gzip
gzip on;
# gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。
gzip_static on;
# 低于 1KB 的文件不压缩，建议设置，否则低于 1KB 的文件可能会反向压缩
gzip_min_length 1k;
# 设置 gzip 版本 P.S.：通常设置为 1.1 版本，但是针对微前端中的子应用，1.1 版本过高，可能导致 gzip 启用不成功，建议设置为 1.0
gzip_http_version 1.0;
# gzip 压缩级别，1 - 10，数字越大，压缩越好，也越占 CPU ，鉴于设置中间数
gzip_comp_level 6;
# 配置禁用 gzip 条件，支持正则，此处表示低于 IE6 版本不启用
gzip_disable "msie6";
# 设置压缩所需要的缓冲区大小
# 获取多少内存用于缓存压缩结果，4 16k表示以16k*4为单位获得，默认 4 8k
gzip_buffers 4 8k;
# nginx做为反向代理时启用
# off(关闭所有代理结果的数据的压缩),
# expired(启用压缩,如果header头中包括"Expires"头信息),
# no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),
# no-store(启用压缩,header头中包含"Cache-Control:no-store"),
# private(启用压缩,header头中包含"Cache-Control:private"),
# no_last_modefied(启用压缩,header头中不包含"Last-Modified"),
# no_etag(启用压缩,如果header头中不包含"Etag"头信息),
# auth(启用压缩,如果header头中包含"Authorization"头信息)
gzip_proxied any;
# 启用应答头"Vary: Accept-Encoding"
gzip_vary on;
# 设置需要压缩的MIME类型,非设置值不进行压缩，其中text/html被系统强制启用
# P.S.：设置文件类型时，如下几个类型建议设置：application/javascript application/x-javascript text/css ，如果设置不匹配，同样 gzip 未启用
gzip_types text/plain text/css application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
}
}
}