vue项目打包文件过大，使用compression-webpack-plugin压缩文件，配置解压gz文件

开始打包的时候发现打包后的文件有10M以上，首屏加载特别慢，文件比较大，于是整理了webpack插件，压缩打包文件。 安装文件：npm install compression-webpack-plugin --save-dev 在vue.config.js进行配置

const path = require("path");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];

在module.exports = {}里面配置

  configureWebpack:{
  plugins: [
    new CompressionWebpackPlugin({
      filename: "[path].gz[query]",
      algorithm: "gzip",
      test: new RegExp('\\.(js|css)$'), //匹配文件名
      threshold: 10240, //对10K以上的数据进行压缩
      minRatio: 0.8,
      deleteOriginalAssets: true //是否删除源文件,删除的话不会有js文件，都是gz文件
    })
  ]
  }

** 接下来打包文件 npm run build ，打包完成之后会生成.gz文件，从10M到3M大小** 这时候你需要在后端进行配置，如果是node的话就可以直接写，因为使用的是nginx，所以在nginx.conf进行配置 ，在http中进行配置

gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 32k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6].";

这时候服务器就能正常的读取.gz文件了，