vue项目中使用webpack 配置gzip压缩

什么是gzip

Gzip是若干种文件压缩程序的简称，通常指GNU计划的实现，此处的gzip代表GNU zip。也经常用来表示gzip这种文件格式。

在压缩优化方面的作用

通过gzip这个压缩程序，对资源进行压缩，从而降低请求资源的文件大小。

应用场景

在网络请求中，选择一个js或css或html，但凡在Response Headers中找到 content-encoding: gzip 键值对，这就说明这个文件启用了gzip压缩。响应头Etag:W/"字符串“表示启用的是在线压缩，Etag:"字符串"表示启用的是静态资源压缩加载。gzip压缩比率在5-6倍，服务器配置了静态gz加载后，浏览器也返回的是gz文件，就不会出现因为文件体积过大而导致线程卡住情况了。
1、打包的时候通过webpack配置生成对应的 .gz 文件，浏览器请求js/css等文件时，服务器配置相应压缩语法，返回对应的js.gz文件。这样可以省去服务器压缩的时间，减少一些服务端的消耗。
示例：此处使用compression-webpack-plugin@5.0.0版本，避免版本过高引起构建错误。

npm install compression-webpack-plugin@5.0.0 --save-dev
//vue.config.js