Vue开启Gzip

Vue配置

1、安装  npm install --save-dev compression-webpack-plugin@5.0.0  

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [
                    new CompressionWebpackPlugin({
                        test: /\.js$|\.html$|\.css/, //匹配文件名
                        threshold: 10240, //对超过10k的数据进行压缩
                        deleteOriginalAssets: false //是否删除原文件
                    })
                ]
            }
        }
    }

nginx.conf中配置

http {
    #开启gzip功能
    gzip on; 
    #开启gzip静态压缩功能
    gzip_static on; 
    #gzip缓存大小
    gzip_buffers 4 16k;
    #gzip http版本
    gzip_http_version 1.1;
    #gzip 压缩级别 1-10 
    gzip_comp_level 2;
    #gzip 压缩类型
    gzip_types text/plain application/x-javascript text/css application/xml;
    gzip_min_length 1k;
    gzip_vary on;
    gzip_disable "MSIE [1-6].";

    server {
    
    }
}

 

Gzip配置文档：http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件

test: /\.(js|css|html)?$/i, // 压缩文件格式
filename: '[path].gz[query]', // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩
// 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
threshold: 10240,
minRatio: 0.8, // 压缩率小于1才会压缩
deleteOriginalAssets: true // 是否删除原资源