vue-cli2 开启 gzip 压缩

第一步：找到config文件夹下的index.js文件，将productionGzip改为true，开启gzip压缩。

index.png

第二步：安装依赖 compression-webpack-plugin

npm install --save-dev compression-webpack-plugin

第三步: 找到build文件夹下的webpack.prod.conf.js文件，配置gzip

js.png

代码如下

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

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

注意：如果执行npm run build报错，需要执行一下命令。

1. 卸载已经安装的最新版2.0 compression-webpack-plugin 安装包。

npm uninstall --save-dev compression-webpack-plugin

2. 重新安装1.1.12版本(该版本为1.1的最新版)。卸载其实可以不用，直接执行安装命令，进行版本覆盖也行。

npm install --save-dev [email protected]

这样就完成前端的工作了，但开启gzip压缩还需要后端配合

后台开启gzip——nginx开启gzip

http {
 gzip on; #开启或关闭gzip on off
 gzip_disable "msie6"; #不使用gzip IE6
 gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
 gzip_buffers 4 16k; #buffer 不用修改
 gzip_comp_level 3; #压缩级别:1-10，数字越大压缩的越好，时间也越长
 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型
 gzip_vary off;  #跟Squid等缓存服务有关，on的话会在Header里增加 "Vary: Accept-Encoding"
}