前端项目使用gzip压缩后，可以大大的增加首屏加载的效率，给大家看一下压缩的效率。
可以看到项目文件都减小了70%+，这对于首屏加载效率可以有很大的提升。
大家可能在很多博客中看到了压缩方案，这里直接说一下在执行过程中遇到的两个问题，有遇到相同问题的兄弟可以参考。
执行npm run build后压缩失败
如图所示，全篇就只有一个.gz文件，出现这种问题要使用逆向思维，为什么会出现这种情况？
首先出现了.gz文件，说明配置起到了作用，但是为什么只有一个，还没有名字呢？
我们使用过程中有一个配置项是filename,为了适配范围更广，我使用了
filename: "[path].gz[query]"
但其实如果不指定，他会有一个默认值：
Default: "[path][base].gz"
很明显第一种写法执行过程中遇到了一些问题，我跟踪了一下压缩过程：
发现如果不写[base]就会出现这种情况，因为老版本的[path]是结合了新版本[path]和[base]的值，为了让插件更灵活，新版本要分开写这两个文件，所以我重写了filename:
new CompressionWebpackPlugin({
filename: "[path][base].gz[query]",
algorithm: "gzip",
test: new RegExp('\.(' + ['js','css'].join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
代码就可以正常压缩了，正常的情况见本文章开篇第一图。
配置好nginx服务，前端仍然无法加载gzip压缩包查看gzip是否生效，可以通过f12 -> network -> Content-Encoding项进行查看，如果没有该选项，可以自行添加，方式如图：
通过查看nginx官方文档，gzip_http_version默认是1.1，意思是对HTTP/1.1协议的请求才会进行gzip压缩，一些特殊情况（比如我们项目需要一台反向代理服务器转发请求，我们不知道他的具体配置），可能会导致无法对gzip的包进行下载，所以可以改成：
gzip_http_version 1.0|1.1 或者直接写为 gzip_http_version 1.0
改好以后就可以正常进行gzip压缩了。
配置过程npm install --save-dev compression-webpack-plugin
小贴士： 使用最新版本的插件可能build时候会报错，所以如果遇到
Cannot read property ‘tapPromise‘ of undefined
请安装低版本的插件,6.1.1亲测可用。
npm install --save-dev compression-webpack-plugin@6.1.1
vue.config.js
因为压缩会耗时，所以一般只针对正式环境（production）进行配置。
const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack:{
plugins: [
new CompressionWebpackPlugin(process.env.NODE_ENV !== 'development' ?{
filename: "[path][base].gz[query]",
algorithm: "gzip",
test: new RegExp('\.(' + ['js','css'].join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}: {}),
}
}
修改nginx服务器的配置，注意是server{}中的。
nginx.conf
server {
listen 80;
...
---------start---------
gzip on;
gzip_http_version 1.0;
gzip_static on;
gzip_min_length 1;
gzip_comp_level 4;
gzip_vary on;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
---------end---------
location / {
}...
}
说到最后
对于我遇到的两个问题，我目前是知其然不知其所以然，有朋友知道原因的欢迎评论私信。
以上。
