Gzip在vue cli3中的使用方式

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。

我们可以借助 ompression-webpack-plugin 来实现gzip压缩。
安装：

npm i compression-webpack-plugin -D

vue.config.js中的配置

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
...
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
            threshold: 10240, // 归档需要进行压缩的文件大小最小值，我这个是10K以上的进行压缩
            deleteOriginalAssets: false, // 是否删除原文件
            minRatio: 0.8
          })
        ]
      }
    }
  }
}

对比下图，红色是压缩前，绿色是压缩后

压缩对比图

前端配置完毕，然后再去配置服务器开启Gzip功能，详细请翻阅其他资料。

全部完成后，再访问网页，就能看到请求文件的Response Headers中多了一行 content-encoding: gzip

请求文件信息