Vue全局Gzip压缩

现状：静态资源体积大，加载慢

1、压缩原理

在一个文件中找出重复出现的部分并临时替换它们，从而使整个文件变小。换言之，文件中代码的重复率越高，那么压缩的效率就越高，使用 Gzip 的收益也就越大。通常压缩后体积可以减少一半以上。

2、前端开启Gzip压缩

(1)、项目安装插件 compression-webpack-plugin

npm install compression-webpack-plugin -D

(2)、在vue.config.js文件中引入并配置

const CompressionPlugin = require("compression-webpack-plugin");
module.export = {
  configureWebpack: () => {
     if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            algorithm: 'gzip', // 默认值为gzip不配置也行
            test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, //压缩的文件类型
            threshold: 10240, // 对10K以上文件进行压缩,可以根据自己需求进行修改
            deleteOriginalAssets: false // 是否删除原文件
          })
        ]
      }
    }
  }
}

(3)、可以看到生成的dist文件夹中存在 .gz 类型的文件表示配置成功

(4)、nginx开启静态压缩，nginx.conf文件新增配置

gzip_static on;

ps：如果nginx默认没有构建ngx_http_gzip_static_module，需要增加--with-http_gzip_static_module参数，可以通过nginx -V命令查看编译参数

(5)、重启nginx

注：也可以结合插件@gfx/zopfli使用，是在上述基础上做了小优化，压缩率更高一点。