uniapp提升性能之使用gzip配置和服务端gzip

因Vue项目打包后某些js文件比较大，导致首次进入网站时加载时间较长

<div style="background-color:#4F81BD;color:white">什么时候压缩</div>	<div style="background-color:#4F81BD;color:white">流程	<div style="background-color:#4F81BD;color:white">说明
服务端响应请求时压缩	服务端接收请求后找到响应文件，并进行压缩，然后将压缩后的文件作为内容返回给客户端	压缩等级越高压缩效果越好，同时CPU消耗也越大，压缩时间也越长
构建时压缩	项目构建时将文件压缩后发布	构建时压缩不占用响应事件，可以选择较高的压缩等级，生成压缩完的静态网站后部署到服务器
结合使用	请求根据文件类型，大小，请求频次等对压缩时点做策略选择	构建时对需要压缩的文件进行压缩，服务端在收到请求后首先查找对应的已压缩文件，找不到的情况下使用服务端压缩

那么我们就可以使用gzip来进行优化，下面就是gzip的配置教程

前端页面配置gzip

1. 首先在根目录创建 <kbd>vue.config.js</kbd>文件

2. 安装所需的依赖

npm install brotli-webpack-plugin -s
npm install compression-webpack-plugin -s //必须安装
npm install @gfx/zopfli -s

3. 在<kbd>vue.config.js</kbd>中添加内容

// const BrotliPlugin = require("brotli-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin"); //必须引入
const zopfli = require("@gfx/zopfli");

let plugins = [];
if (process.env.NODE_ENV === "production") {
  const compressionTest = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i;
  plugins = [
    new CompressionPlugin({
      algorithm(input, compressionOptions, callback) {
        return zopfli.gzip(input, compressionOptions, callback);
      },
      compressionOptions: {
        numiterations: 15
      },
      minRatio: 0.99,
      test: compressionTest
    }),
    // new BrotliPlugin({
    //   test: compressionTest,
    //   minRatio: 0.99
    // })
  ];
}

module.exports = {
  configureWebpack:{
	  plugins
  }
}

4. 保存文件后进行打包，若正常打包完成则是会出现.gz后缀的压缩包

gzip压缩成功示意图

5. 若打包时出现<kbd>Cannot read property 'tapPromise' of undefined</kbd>错误

这其实就是vue 使用webpack插件打包时候报错，compression-webpack-plugin版本过高的问题导致的

解决方法:

先卸载现在已经安装的

npm uninstall compression-webpack-plugin

然后装一个低版本的

//@后面的为版本号，版本可自选
npm install --save-dev compression-webpack-plugin@1.11.2
npm i compression-webpack-plugin@5.0.1
...

最后再尝试打包，正常打包后就完成前端页面的gzip配置了

服务器配置gzip

注意：开启gzip需要nginx支持，以下省略安装nginx步骤

1. 在nginx的配置文件中进行编辑，写在http下

# 开启gzip
gzip on;
gzip_static on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小   
gzip_buffers 4 16k;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 5;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
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;
gzip_proxied expired no-cache no-store private auth;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6].";

2. 测试服务端gzip是否成功压缩启用

这里推荐https://tool.chinaz.com/Gzips，结果很直观就能看到，也不需要再麻烦去开发者模式看标题头了

参考资料： https://www.jianshu.com/p/009ad45e5ae7 https://www.jianshu.com/p/ca329a8c1ff1 https://www.cnblogs.com/zs-note/p/9556390.html