vue-cli3构建的项目使用compression-webpack-plugin 进行GZip压缩

使用vue-cli3搭建的vue 项目是没有 productionGZip配置的，需要你安装插件compression-webpack-plugin并在vue.config.js中进行相应的配置才能实现项目的性能优化

1、安装插件：compression-webpack-plugin

npm i -D compression-webpack-plugin

2、在 vue.config.js 文件中配置 compression-webpack-plugin

const compressionWebpackPlugin = require('compression-webpack-plugin'); //引入插件
const productionGZipExtensions = ['js', 'css']; //压缩的文件类型
module.exports = {
    
    
  //简单配置
    configureWebpack: {
    
    
      plugins: [
        new compressionWebpackPlugin({
    
    
          //[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
          asset: '[path].gz[query]', // 提示[email protected]的话asset改为filename
          //可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
          algorithm: 'gzip',
          //所有匹配该正则的资源都会被处理。默认值是全部资源。
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          //只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
          threshold: 10240,
          //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
          minRatio: 0.8
        })
      ] 
    },

    //复杂配置
    /*configureWebpack: config => {
      if(process.env.NOVE_ENV === 'production'){
        config.push(
          new compressionWebpackPlugin({
            asset: '[path].gz[query]', // 提示[email protected]的话asset改为filename
            algorithm: 'gzip',
            test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
            threshold: 10240,
            minRatio: 0.8
          })
        )       
      }
    }else{} 
   */  

}

3、使用 compression-webpack-plugin 后打包项目过程中报错的解决方式：

① 如果 [email protected] 的话，就把 vue.config.js 中关于 compression-webpack-plugin 配置 asset 改为 filename

② 如果构建过程中提示一些属性找不到，那么可以把项目中的 package.lock.json 和 node_modules 删除，
并把 package.json 中关于 compression-webpack-plugin 版本调低，如：1.1.12，然后重新 npm install 和 npm run build