gzip压缩前端配置(个人笔记)

本文参考：https://www.cnblogs.com/zigood/p/12504401.html

步骤

安装插件

npm i --save-dev compression-webpack-plugin

在vue.config.js 中配置

const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
    publicPath: './',
    productionSourceMap: false,
    configureWebpack: {...},
    chainWebpack: config => {
        config.resolve.alias.set('@', resolve('src'));
        if (process.env.NODE_ENV === 'production') {
            config.plugin('compressionPlugin')
            .use(new CompressionPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: productionGzipExtensions,
                threshold: 10240,
                minRatio: 0.8,
                deleteOriginalAssets: true
            }));
        }
    },
};

Name	Type	Default	Description
test	{RegExp}	.	处理所有匹配此 {RegExp} 的资源
asset	{String}	[path].gz[query]	目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
filename	{Function}	false	一个 {Function} (asset) => asset 函数，接收原资源名（通过 asset 选项）返回新资源名
algorithm	{String\Function}	gzip	可以是 (buffer, cb) => cb(buffer) 或者是使用 zlib 里面的算法的 {String}
threshold	{Number}	0	只处理比这个值大的资源。按字节计算
minRatio	{Number}	0.8	只有压缩率比这个值小的资源才会被处理
deleteOriginalAssets	{Boolean}	false	是否删除原资源

压缩前后的大小对比

image.png