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

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

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

GZIP压缩

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

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

而Nginx就支持GZIP进行传输,对页面jscsshtml等静态文件加载,有着优化作用。

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的压力哦。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改