webpack使用gzip 压缩文件

目的：打包体积过大时， 提升web传输性能，使浏览器不卡顿
前端对css/js 打包压缩， 后端nginx 也打包压缩， 这样节省服务性能， 在浏览器传输时， 服务端没有找到.gz 文件才进行压缩，而不至于每次都压缩， 消耗性能

安装

npm install compression-webpack-plugin

配置

config.index.js

build:{
	...
	 productionGzip: true,
	...
}

webpack.prod.conf.js

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )

nginx配置

    gzip  on;
    #启用gzip压缩的最小文件，小于设置值的文件将不会压缩
    gzip_min_length 1K;
    #gzip_buffers 4 16k;
    gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间, 一般都设置成中间值
    gzip_comp_level 5;
    #进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
    gzip_types text/plain application/json application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
    #是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;

重启nginx 后， 重新流量页面，再response header 中将会看到Content-Encoding: gzip， ETag: W/“6103c456-91874” 表示是服务端动态压缩加载的， 若没有前面的W/， 表示直接加载的文件并没有压缩