美文网首页
gzip压缩前端配置(个人笔记)

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

作者: kevision | 来源:发表于2020-07-07 19:43 被阅读0次

    本文参考: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

    相关文章

      网友评论

          本文标题:gzip压缩前端配置(个人笔记)

          本文链接:https://www.haomeiwen.com/subject/ccmzqktx.html