vue打包时gzip压缩的两种方案

刺骨的言语ヽ痛彻心扉 2021-09-01 05:44 635阅读 0赞

开局一张图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center]  
可以看出，在项目部署后，我们的资源文件请求都会保持原本大小，如果文件过大，并且很多的情况下，会导致网络请求耗时，严重点可能阻塞后面的进程。

所以，此篇介绍两种gzip压缩的方式：

1、打包的时候通过webpack配置生成对应的 .gz 文件，浏览器请求xx.js/css等文件时，服务器返回对应的xxx.js.gz文件；

2、浏览器请求xx.js文件时，服务器对xx.js文件进行gzip压缩后传输给浏览器。

*  **webpack打包生成gz文件**

安装插件（compression-webpack-plugin）：

npm install compression-webpack-plugin --save-dev

vue.config.js文件进行webpack配置（没有此文件可以在项目根路径创建一个文件）：

const CompressionPlugin = require('compression-webpack-plugin');
    module.exports = {
            plugins: [
                new CompressionPlugin({
                    algorithm: 'gzip', // 使用gzip压缩
                    test: /\.js$|\.html$|\.css$/, // 匹配文件名
                    filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
                    minRatio: 1, // 压缩率小于1才会压缩
                    threshold: 10240, // 对超过10k的数据压缩
                    deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
                }),
            ],
        },
    };

这里对js、html、css文件进行了压缩处理，并没有进行图片压缩，因为图片压缩并不能实际减少文件大小，反而会导致打包后生成很多同大小的gz文件，得不偿失。

当然了，上文提到过，浏览器请求xx.js/css等文件时，服务器返回对应的xxx.js.gz文件，所以还需要在服务器配置一个属性，以期望它能正常返回我们需要的gz文件。

这里拿nginx举例（nginx.conf文件）：

http {
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        #tcp_nopush     on;
    
        #keepalive_timeout  0;
        keepalive_timeout  65;
    
        gzip_static on;
    
        server {
            listen       8462;
            server_name  localhost;
    
            location / {
                root   dist;
                index  index.html index.htm;
            }
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    
    }

其中gzip\_static on这个属性是静态加载本地的gz文件。

看下效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 2]  
gzip压缩比率在5-6倍，nginx配置了静态gz加载后，浏览器也返回的是gz文件，这样就会请求小文件而不会导致请求卡线程，并且，因为保留了源文件，所以当我们删除gz后，浏览器会自动去请求原始文件，而不会导致界面出现任何问题（如图二）。  
静态加载gz文件主要是依托于下面的请求头：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 3]

*  **服务器在线gzip压缩**

前端不用进行任何配置，也不用webpack生成gz文件，服务器进行处理，拿nginx举例：

http {
        include       mime.types;
        default_type  application/octet-stream;
    
        sendfile        on;
        #tcp_nopush     on;
    
        #keepalive_timeout  0;
        keepalive_timeout  65;
    
        # 开启gzip
        gzip  on;
        
        # 设置缓冲区大小
        gzip_buffers 4 16k;
        
        #压缩级别官网建议是6
        gzip_comp_level 6;
     
        #压缩的类型
        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;
    
    
        server {
            listen       8462;
            server_name  localhost;
    
            location / {
                root   dist;
                index  index.html index.htm;
            }
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    }

上面有一些关于gzip的配置，首先是开启gzip，设置缓冲区大小，压缩的等级，需要压缩的文件等（如果需要更详细的配置，可以查看nginx的配置文档），看下效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 4]  
响应头中会携带gzip压缩配置，每次请求xx.js文件，服务器都会进行实时压缩。

两种方案的优缺点：

1、webpack打包，然后直接使用静态的gz，缺点就是打包后文件体积太大，但是不耗服务器性能；  
2、使用nginx在线gzip，缺点就是耗性能，需要实时压缩，但是vue打包后的文件体积小。

这里可能有些同学就要问题，我想在有gz文件的时候进行静态压缩，不存在gz文件的时候进行在线压缩而不是加载源文件，要怎么做呢？

简单，两种配置都写上即可。

gzip on;
    gzip_static on;
    gzip_comp_level 2;
    gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

首先，gzip\_static的优先级高，会先加载静态gz文件，当同目录下不存在此文件的时候，会执行在线压缩的命令。

有些小伙伴就会纳闷，既然都开启的情况下，我们怎么区分使用了静态加载还是在线压缩呢？  
响应头的Content-Edcoding:gzip表示gzip压缩已经生效，而Etag中只有简单字符表示静态资源加载，而前面带 W/ 表示启动了在线压缩。看下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 6]  
以上就是两种gzip压缩的方案。

期待能够对你有所帮助~~~

个人微信公众号：  
![在这里插入图片描述][20200824113731576.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/3beae82e7b0845f2b0b0afb2acfb231a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/ae66b20b82934ec6a1a8f4f070936cfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210813/acfb6492de5241d2a4a7a0b92c8e0595.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210813/cb98a538b5e84920aac61fe5a45ee1f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210813/fbaa390e63954cd0a1152f5b070d6a84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210813/a891c403356c4535939bff9ee48a9772.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20210813/8b2833bf419747f3845b0c253eb2c547.png
[20200824113731576.png_pic_center]: /images/20210813/fb06f76bdc154240a17635a52f3fcbdf.png