1.Install compression-webpack-plugin

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

2.vue.config.js configuration

const CompressionPlugin = require("compression-webpack-plugin");
const IS_PROD =["production","prod"].includes(process.env.NODE_ENV);


module.exports = {
  chainWebpack: (config) => {
    // enable js, css compression
    if (IS_PROD) {
      config.plugin("compressionPlugin").use(
        new CompressionPlugin({
          test: /\.js$|\.html$|\.css/, // Match file names
          threshold: 10240, // Compress data over 10k
          deleteOriginalAssets: false, // do not delete the source files
        })
      );
    }
  }
}

3. Run build error

 ERROR  TypeError: Cannot read property 'tapPromise' of undefined
TypeError: Cannot read property 'tapPromise' of undefined

The reason for troubleshooting is that the version is too high. Execute the following command

npm uninstall compression-webpack-plugin
npm i [email protected]

PS: I configured another project and reported other errors. The reason was the problem of the webpack version. Uninstall the current webpack version and install 4.0 0 version resolution