前端 webpack在打包时借助compression-webpack-plugin插件实现gzip压缩

最新推荐文章于 2025-03-06 16:13:38 发布

原创最新推荐文章于 2025-03-06 16:13:38 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webpack #javascript

文章介绍了如何在Vue项目中利用compression-webpack-plugin进行gzip压缩，以减少文件体积，提高HTTP请求速度。主要步骤包括安装插件、配置vue.config.js，并通过检查生成的.gz文件和HTTP响应头中的Content-Encoding来验证压缩效果。

gzip压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。

1、下载compression-webpack-plugin

npm i compression-webpack-plugin --save

2、在vue.config.js使用

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css'];

module.exports = {
    configureWebpack: config => {
        // 开发环境不配置
        if (process.env.NODE_ENV !== 'production') return
        // 生产环境才去配置
        return {
             plugins: [
                new CompressionWebpackPlugin({ //zip压缩插件
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//匹配文件名
                    threshold: 10240,//对10K以上的数据进行压缩
                    minRatio: 0.8,
                    deleteOriginalAssets: false,//是否删除源文件
                }),
             ],
        }
    },
}