「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」。

GZIP压缩

GZIP压缩，就是平常看到的.gz结尾的文件；但是，GZIP只能压缩单一文件。

所以，平时Linux下载的.tar.gz文件，实际上是先用Tar对文件夹进行归档，之后再压缩为Gzip文件。

而Nginx就支持GZIP进行传输，对页面js、css和html等静态文件加载，有着优化作用。

Vue打包

虽然Nginx可以启动即使压缩，但是能在Vue打包过程就压缩好，就可以缓解服务器CPU的压力。

打包后的

而我们想要实现这样的目的很简单：

安装compression-webpack-plugin
修改webpack配置（vue.config.js）并打包
Nginx部署并修改配置

compression-webpack-plugin

这次我们使用compression-webpack-plugin插件来进行压缩。

安装

首先我们是安装这个插件：

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

因为我们只有在打包阶段使用，所以我们使用--save-dev参数，你也可以加上-D参数。

当然，如果你用的是vue-cli 4.x依赖的是webpack4.x，那么只能用旧版本的compression-webpack-plugin，新版本的依赖webpack5.x：

npm i compression-webpack-plugin@6.1.0 -D

否则，会出现：

TypeError: Cannot read property 'NormalModule' of undefined

安装旧版本

文档说明

建议查看官方文档：github.com/webpack-con…

使用样例：

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  plugins: [new CompressionPlugin()],
};

可以选择的参数：

参数名	类型	默认值	描述
test	{String\|RegExp\|Array<String\|RegExp>}	undefined	处理所有匹配此 {RegExp} 的资源
include	{String\|RegExp\|Array<String\|RegExp>}	undefined	包含目标内容
exclude	{String\|RegExp\|Array<String\|RegExp>}	undefined	排除目标内容
algorithm	{String\|Function}	gzip	可以是 (buffer, cb) => cb(buffer) 或者是使用 zlib 里面的算法的 {String}
compressionOptions	{Object}	maximum available compression level, for gzip: { level: 9 }	压缩选项（压缩级别等）
threshold	{Number}	0	启动压缩的最小文件（单位字节）
minRatio	{Number}	0.8	只有压缩率比这个值小的资源才会被处理
filename	{String\|Function}	[path][base].gz	一个 {Function} (asset) => asset 函数，接收原资源名（通过 asset 选项）返回新资源名
deleteOriginalAssets	{Boolean\|'keep-source-map'}	false	是否删除原资源

一般情况下，出了test正则匹配需要书写，其他保存默认就好了。

vue.config.js

现在我们就在vue.config.js内编写即可，因为Vue支持链式配置，所以：

let productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
    config.plugin("CompressionPlugin").use('compression-webpack-plugin', [{
          filename: '[path][base].gz',
          algorithm: 'gzip',
          // 要压缩的文件（正则）
          test: productionGzipExtensions,
          // 最小文件开启压缩
          threshold: 10240,
          minRatio: 0.8
        }])
    }
  },
}

这样就可以了，我们编译看看效果。

打包

打包：

npm run build

打包效果

另外，我使用了Bootstrap5，Bootstrap5也打包了；

打包bootstrap5

压缩率还可以：

压缩率

接下来，放到Nginx上部署即可。

Nginx设置

Nginx其实没什么好设置的，Nginx同时支持动态Gzip和静态Gzip；两个的区别，就是静态Gzip是直接用已经存在的.gz文件进行加载，而动态Gzip则是实时加载（CPU负载高）。

所以，正常情况下我们是两个模式都开启，在Nginx配置内加入：

    gzip_static on;
    gzip_proxied expired no-cache no-store private auth;
    gzip_disable "MSIE [1-6]\.";

为使用gzip压缩：

未使用压缩的体积

响应头

启动gzip压缩后：

使用压缩后体积

启动压缩后响应头

当然，最好还开启Nginx自带的Gzip，“动静结合”：

    gzip_static on;
    gzip_proxied expired no-cache no-store private auth;
    gzip on;
    gzip_min_length 1k;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

END

最后，到这里，我们的compression-webpack-plugin就配置完成了。更多详细的内容，可以看看Nginx的gzip属性。编译状态下，就编译.gz文件，可以减轻CPU的压力哦。

Vue使用compression-webpack-plugin启动gzip打包压缩并在Nginx上激活