gzip暴力压缩、br压缩

1、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/png image/gif;
  # 是否在http header中添加Vary: Accept-Encofing,建议开启
  gzip_vary on;
}

...
http {
    ...
    gzip               on;
    gzip_min_length    1k;
    gzip_buffers       4  16k;
    #gzip_http_version  1.1;
    gzip_comp_level    2; # 压缩级别
    # 要压缩的mine类型
    gzip_types         text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss image/jpeg image/gif image/png image/svg+xml;
    gzip_vary          off;
    gzip_proxied       expired no-cache no-store private auth;
    #IE6不支持gzip
    gzip_disable       "MSIE [1-6]\."; 
    ...
}

2、Vue开启gzip

2.1 安装依赖

compression-webpack-plugin - npm
https://www.npmjs.com/package/compression-webpack-plugin

npm install compression-webpack-plugin@6.1.1 --save-dev
npm install compression-webpack-plugin --save-dev
yarn add -D compression-webpack-plugin
pnpm add -D compression-webpack-plugin

2.2 配置gzip

config —> index.js

build: {
  productionGzip: true,
  productionGzipExtensions: ['js', 'css']
}

webpack.config.js

const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
  plugins: [new CompressionPlugin()],
};

最终优化后的效果如下图：vendor.js文件从1M以上优化到256K左右，体积减少接近80%，排除服务器影响的因素，界面渲染速度基本都在1s左右，达到秒开效果，比之前快
了太多，体验一下就上来了嘻嘻。

开启 br 压缩

当前 br 压缩是在 nginx 服务器进行且并未缓存资源，因此每次请求都需要对资源进行压缩之后发出，考虑服务器性能，压缩级别设置为 6。
现在改为客户端压缩，服务器在接收请求时直接把压缩文件发出，减少服务器压力。同时客户端压缩可以把压缩级别调整至最高的 11，整体资源大小会再次下降，使用 compression-webpack-plugin 实现。

yarn add zlib -D

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const zlib = require('zlib');
if (!isDev) {
  plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].br[query]',
      algorithm: 'brotliCompress',
      test: /\.js$|\.css$|\.html$/,
      //test: /.(js|css|json|txt|html|ico|svg)(?.*)?$/i,
      compressionOptions: {
        params: {
          [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
        },
      },
      threshold: 1024,
      minRatio: 0.99,
      //删除原始文件只保留压缩后的文件
      deleteOriginalAssets: false,
    }),
  );
}

br压缩后更小