webpack-gzip构建压缩优化

compresison-webpack-plugin 压缩插件

插件描述

准备资源的压缩版本，以使用Content-Encoding服务

插件安装

npm install compression-webpack-plugin --save-dev

备注：压缩插件使用过程中遇到的问题：
Cannot read property ‘tapPromise‘ of undefined
是版本过高导致的，所以卸载后重新安装低版本的插件。

npm uninstall compression-webpack-plugin
npm i compression-webpack-plugin@5.0.0

插件使用（在 vue.config.js里面）

const CompressionWebpackPlugin = require('compression-webpack-plugin');
......
configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [
      new CompressionWebpackPlugin(
        {
          filename: info => {
            return `${info.path}.gz${info.query}`
          },
          algorithm: 'gzip',
          threshold: 10240, // 只有大小大于该值的资源会被处理 10240
          test: new RegExp('\\.(' + ['js'].join('|') + ')$'
          ),
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false // 删除原文件
        }
      )
    ]
  }