1.安装插件：compression-webpack-plugin
npm i -D compression-webpack-plugin
我用的插件在package.json中的版本如下：
"devDependencies": { "compression-webpack-plugin": "^3.1.0", }
2.在 vue.config.js 文件中配置 compression-webpack-plugin
const productionGzipExtensionsc = [‘js‘, ‘css‘]; //压缩的文件类型 const compressionWebpackPlugin = require(‘compression-webpack-plugin‘); //引入插件 module.exports = { configureWebpack: { plugins: [ new compressionWebpackPlugin({ //[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。 filename: ‘[path].gz[query]‘, // 提示compression-webpack-plugin@3.0.0的话asset改为filename //可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。 algorithm: ‘gzip‘, //所有匹配该正则的资源都会被处理。默认值是全部资源。 test: new RegExp(‘\\.(‘ + productionGzipExtensionsc.join(‘|‘) + ‘)$‘), //只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。 threshold: 10240, //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。 minRatio: 0.8 }) ] } }
3.在nginx.conf文件中加上gzip_static on;
如下所示：
http { include mime.types; default_type application/octet-stream; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; gzip_static on; server { listen 8462; server_name localhost; location / { root dist; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
4.运行vue打包命令后，dist文件夹会出现gz文件。
gzip压缩比率在5-6倍，nginx配置了静态gz加载后，浏览器也返回的是gz文件，这样就会请求小文件而不会导致请求卡线程。
并且，因为保留了源文件，所以当我们删除gz后，浏览器会自动去请求原始文件，而不会导致界面出现任何问题。
看到请求头的Accept-Encoding:gzip和响应头的Content-Encoding:gzip则说明使用gzip压缩成功。
ps：还有另外一种gzip压缩方式即服务器在线gzip压缩。
前端不用进行任何配置，也不用webpack生成gz文件，服务器进行处理，拿nginx举例：
http { include mime.types; default_type application/octet-stream; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; # 开启gzip gzip on; # 设置缓冲区大小 gzip_buffers 4 16k; #压缩级别官网建议是6 gzip_comp_level 6; #压缩的类型 gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php; server { listen 8462; server_name localhost; location / { root dist; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
上面有一些关于gzip的配置，首先是开启gzip，设置缓冲区大小，压缩的等级，需要压缩的文件等（如果需要更详细的配置，可以查看nginx的配置文档），看下效果：
响应头中会携带gzip压缩配置，每次请求xx.js文件，服务器都会进行实时压缩。
两种方案的优缺点：
1、webpack打包，然后直接使用静态的gz，缺点就是打包后文件体积太大，但是不耗服务器性能；
2、使用nginx在线gzip，缺点就是耗性能，需要实时压缩，但是vue打包后的文件体积小。
这里可能有些同学就要问题，我想在有gz文件的时候进行静态压缩，不存在gz文件的时候进行在线压缩而不是加载源文件，要怎么做呢？
简单，两种配置都写上即可。
gzip on; gzip_static on; gzip_comp_level 2; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
首先，gzip_static的优先级高，会先加载静态gz文件，当同目录下不存在此文件的时候，会执行在线压缩的命令。
既然都开启的情况下，我们怎么区分使用了静态加载还是在线压缩呢？
响应头的Content-Encoding:gzip表示gzip压缩已经生效，而ETag中只有简单字符表示静态资源加载，而前面带 W/ 表示启动了在线压缩。