react+nginx开启代码压缩gzip

左手的ㄟ右手 2022-12-20 02:09 343阅读 0赞

首先项目安装 compression-webpack-plugin模块

cnpm install compression-webpack-plugin --save-dev

在webpack.config.js 中 找到plugins对象添加一下模块

//在文件顶部添加
    const CompressionPlugin = require("compression-webpack-plugin");
    
    //在plugins下添加
    new CompressionPlugin({
            filename: '[path].gz[query]', // 目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
            algorithm: 'gzip', // 算法
            test: new RegExp('\\.(js|css)$'), // 压缩 js 与 css
            threshold: 10240, // 只处理比这个值大的资源。按字节计算
            minRatio: 0.8 // 只有压缩率比这个值小的资源才会被处理
          })

nginx配置如下

server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
    
    	location ^~ /blog {
            try_files $uri $uri/ /blog/index.html;
        }
    	
    	location ^~ /platform {
             try_files $uri $uri/ /platform /index.html; 
        }
        gzip on;
        gzip_buffers 32 4k;
    
        #文件压缩等级1-9  数值越大压缩效果越好，基本6以后很难看出差别
        gzip_comp_level 6;
    
        #压缩的起点 文件大于1k才进行压缩
        gzip_min_length 1;
    
        #压缩文件的类型
        gzip_types text/css text/xml application/javascript;
    
        # 是否在http header中添加Vary: Accept-Encoding，建议开启
        gzip_vary on;
    	
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }       
    }

压缩期间服务器CPU负载增加。 数据可能需要很长时间才能处理，因为在完成压缩之前不会发送第一个字节，因此可能会使网页显示为挂起状态。 长时间到第一个字节通常会导致用户取消并重新发出对Web服务器的请求，从而导致由于顺序加载请求而导致CPU负载增加。所以酌情使用。