VUE 配置compression-webpack-plugin打包压缩js,css


1.安装compression-webpack-plugin

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

2.vue.config.js配置

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


module.exports = {
  chainWebpack: (config) => {
    // 开启js、css压缩
    if (IS_PROD) {
      config.plugin("compressionPlugin").use(
        new CompressionPlugin({
          test: /\.js$|\.html$|\.css/, // 匹配文件名
          threshold: 10240, // 对超过10k的数据压缩
          deleteOriginalAssets: false, // 不删除源文件
        })
      );
    }
  }
}

3.run build 报错

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

排查原因是版本太高。执行以下命令

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

PS:我在另一个项目配置,报出了其他错误,排查原因是webpack版本的问题,卸载当前webpack版本 安装4.0.0版本解决