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

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,//是否删除源文件
                }),
             ],
        }
    },
}

判断是否配置成功

1、Vue打包的目录，对应压缩文件中就会多了.gz的文件；

2、在http请求中，也可以看到响应头多了Content-Encoding: gzip，没开启gzip压缩是没这个的。