webpack优化：Vue配置compression-webpack-plugin实现gzip压缩

小小弯_Shelby2026-04-08 18:18

需求实现

1.安装依赖

javascript 复制代码

npm i -D compression-webpack-plugin@6.1.1

2.修改vue .config.js配置

javascript 复制代码

const CompressionPlugin = require('compression-webpack-plugin')
// gzip 相关
const isGZIP = process.env.VUE_APP_GZIP === 'ON'

module.exports = {
	configureWebpack(config) {
        if (isGZIP) {
            return {
                plugins: [
                    new CompressionPlugin({
                        algorithm: 'gzip',
                        test: /\.(js|css)$/, // 匹配文件名
                        threshold: 10240, // 对超过10k的数据压缩
                        deleteOriginalAssets: false, // 不删除源文件
                        minRatio: 0.8 // 压缩比
                    })
                ]
            }
        }
    }
}

3.执行命令：npm run build，如图则开启gzip压缩成功