vue项目中开启gzip压缩，优化打包

1.安装包

• 最新版本可能会出现 Cannot read property ‘tapPromise’ of undefined的报错

npm i compression-webpack-plugin@5.0.1

2.修改vue.config.js配置文件，如果没有vue.config.js，在根目录自己创建一个，下面是配置文件的代码

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
module.exports = {
  configureWebpack:config =>{
return {
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5, 
        minChunkSize: 100
      })
    ]
    }
  }
}

configureWebpack: config => {
    return {
      plugins: [
        new CompressionPlugin({
          algorithm: "gzip", // 使用gzip压缩
          test: /\.js$|\.html$|\.css$/, // 匹配文件名
          filename: "[path].gz[query]", // 压缩后的文件名(保持原文件名，后缀加.gz)
          minRatio: 0.8, // 压缩率小于1才会压缩
          threshold: 10240, // 对超过10k的数据压缩
          deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
        }),
      ]
    }
  },

3 到这里问题基本上就解决了，Nginx服务器也要有相应的配置

server{
    listen 8087;
    server_name localhost;

    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
}

我们可以看到，现在打包生成的是成对的文件，一个是JS，一个是压缩的，当项目部署到服务器的时候，页面加载的就是压缩的文件。