vue安装compression-webpack-plug打包时gzip压缩ERROR TypeError:Cannot read property ‘tapPromise‘ of undefined

原创已于 2022-04-22 08:53:23 修改 · 969 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-01-14 16:57:13 首次发布

Vue 专栏收录该内容

198 篇文章

订阅专栏

本文介绍如何在Vue项目中使用compression-webpack-plugin插件进行gzip压缩配置，以减少文件大小，提高加载速度。文中提供了具体配置代码及解决高版本插件导致的问题。

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

vue.config.js文件进行webpack配置

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

npm run build进行打包时出现了 ERROR TypeError:Cannot read property ‘tapPromise‘ of undefined问题

compression-webpack-plugin 安装的是 9 版本的

先执行卸载命令->npm uninstall compression-webpack-plugin

执行安装命令->npm i compression-webpack-plugin@5.0.1