前端性能优化之gzip

cd /etc/nginx/conf.d
vi /betpw.conf

# 开启gzip，关闭用off
gzip on;

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，推荐6
gzip_comp_level 6;

# 设置压缩所需要的缓冲区大小 
gzip_buffers 16 8k;

# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;

# 选择压缩的文件类型，其值可以在 mime.types 文件中找到。
gzip_types text/plain text/css application/json application/javascript

# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;

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

var CompressionWebpackPlugin  = require('compression-webpack-plugin')

 // gzip需要nginx进行配合
chainWebpack(config) {
   config
     .plugin('compression')
     .use(CompressionWebpackPlugin)
     .tap(() => [
          {
            new CompressionPlugin({ 
                    //此插件不能使用太高的版本，否则报错：TypeError: Cannot read property 'tapPromise' of undefined
                    // filename: "[path][base].gz", // 这种方式是默认的，多个文件压缩就有多个.gz文件，建议使用下方的写法
                    filename: '[path].gz[query]', //  使得多个.gz文件合并成一个文件，这种方式压缩后的文件少，建议使用
                    algorithm: 'gzip', // 官方默认压缩算法也是gzip
                    test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 使用正则给匹配到的文件做压缩，这里是给html、css、js以及字体（.ttf和.woff和.eot）做压缩
                    threshold: 10240, //以字节为单位压缩超过此大小的文件，使用默认值10240吧
                    minRatio: 0.8, // 最小压缩比率，官方默认0.8
                    //是否删除原有静态资源文件，即只保留压缩后的.gz文件，建议这个置为false，还保留源文件。以防：
                    // 假如出现访问.gz文件访问不到的时候，还可以访问源文件双重保障
                    deleteOriginalAssets: false
          }
     ])
  }

    configureWebpack: config => {
        // 开发环境不配置
        if (process.env.NODE_ENV !== 'production') return
        // 生产环境才去配置
        return {
            plugins: [
                new CompressionPlugin({ 
                    filename: '[path].gz[query]', 
                    algorithm: 'gzip', 
                    test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, 
                    threshold: 10240, 
                    minRatio: 0.8,
                    deleteOriginalAssets: false
                })
            ]
        }
    },

*   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\_modified：header中包含”Last\_Modified”头信息时启用压缩
*   no\_etag：header中包含“ETag”头信息时启用压缩
*   auth：header中包含“Authorization”头信息
*   any：无条件压缩所有结果数据