vue-cli中配置gzip压缩

对于静态资源，有两种开启压缩的方式，一种是compress in time，一种是precompression。
第一种方式是在服务端实时压缩，第二种方式是在前端预先压缩了。这样当HTTP请求到达之后，直接响应已经压缩过的文件，可以节约服务器的cpu

下面介绍的是第二种方式如何配置，只记录前端部分的配置，（因为服务器nginx那边不是咱们配的咱们也就是不太清楚

---

示例基于
vue："^2.6.11"
vue-cli："~4.5.0"

1. 引入依赖compression-webpack-plugin

这里最好带一个版本，不要太高，之前默认安装了最新版本打包会报错，我这里就选了5.0.0
npm install --save-dev [email protected]

2. vue.config.js配置

vue-cli4.x项目默认没有vue.config.js(3.x同样没有)，请手动创建
配置如下：

const CompressionWebpackPlugin = require('compression-webpack-plugin');

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';
module.exports = {
  productionSourceMap: false,
  configureWebpack: config => {
      // 生产环境相关配置
      if (isProduction) {
        //gzip压缩
        const productionGzipExtensions = ['html', 'js', 'css']
        config.plugins.push(
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' + productionGzipExtensions.join('|') + ')$'
                ),
                threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                deleteOriginalAssets: false // 删除原文件
            })
        )
    }
}
};

效果不错！

---

参考博文：
这一篇里面也有介绍nginx中如何配置：https://juejin.cn/post/6844904071896236040
https://blog.csdn.net/weixin_39683021/article/details/112351698