Nginx核心要领十：Nginx使用淘宝concat模块提升网页加载性能

た入场券 2022-10-02 06:46 225阅读 0赞

使用淘宝开源 Tengine 的 concat 模块，可以使nginx在一次请求中合并多个文件后返回，通过减少http请求次数来加快页面载入速度

我们访问 https://www.taobao.com ，通过浏览器 F12 开发者工具查看页面请求的文件，可以看到淘宝官网页面通过 concat 模块，在一次请求中返回多个js文件，规则：以 ?? 开头，以 , 逗号分隔  
https://g.alicdn.com/??kissy/k/6.2.4/seed-min.js,kg/global-util/1.0.7/index-min.js,tb/tracker/4.3.12/index.js,kg/tb-nav/2.5.3/index-min.js,secdev/sufei\_data/3.3.5/index.js（不同目录下资源）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70]  
下载 concat 模块源码，https://github.com/alibaba/nginx-http-concat  
或在Linux上通过：wget https://github.com/alibaba/nginx-http-concat/archive/1.2.2.tar.gz  
下载文件并解压：tar -xvzf 1.2.2.tar.gz ，解压后目录名称为：nginx-http-concat-1.2.2

###### 将 concat 模块编译进 nginx ######

#1.进入nginx-1.16.0源码目录
    cd /usr/local/nginx-1.16.0
    
    #2.编译nginx，添加concat模块
    ./configure --prefix=/usr/local/nginx --add-module=/usr/local/nginx-http-concat-1.2.2/ --with-http_stub_status_module --with-http_ssl_module --with-http_realip_module
    
    #3.安装编译：
    make && make install
    
    #到第3步就完了，下面的是扩展，可以忽略
    
    #如果在已安装nginx情况下添加nginx模块，只需make，然后cp nginx二进制文件
    make
    cp objs/nginx /usr/local/nginx/sbin/nginx
    /usr/local/nginx/sbin/nginx -s reload
    
    #如果要添加多个module
    ./configure --prefix=/usr/local/nginx --add-module=/usr/local/nginx-http-concat-1.2.2/ --add-module=/usr/local/nginx-sticky-module/

执行到上面的第三步就完成了，然后配置nginx.conf文件，启用concat

server {
            listen       8080;
            server_name  localhost;
    
            location / {
                #root   html;
                alias /home/lkh/;
                index  index.html index.htm;
                
                #开启小文件合并功能
                concat on;
                concat_max_files 30;
                #concat_types 参数很重要，因为默认对js的mime类型是application/x-javascript，导致无法返回js
                concat_types concat_types: text/css text/javascript application/javascript;
            }
    }

使用方法：  
http://192.168.68.136:8080/js/??a.js,b.js,c.js （同一目录下资源）  
http://192.168.68.136:8080/css/??a.css,b.css,c.css

lkh网站内容如下，里面有一个html页面，3个css，3个js，页面使用3个css文件里面的样式，使用3个js文件中的方法，网站目录和文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70 1]  
访问单个css文件：  
![在这里插入图片描述][20190617145942420.jpg]  
一次访问多个css与js，合并请求把所有文件内容返回了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70 3]  
最后看看页面效果，分别使用了3个css文件中的内容，执行打印出3个js文件中的方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70 4]  
html内容如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>梅溪游</title>
        <link href="css/??a.css,b.css,c.css" rel="stylesheet"/>
        <script src="js/??a.js,b.js,c.js"></script>
    </head>
    <body>
      <div class="a">
       使用 a.css 样式
      </div>
      <div class="b">
       使用 b.css 样式
      </div>
      <div class="c">
       使用 c.css 样式
      </div>
    </body>
    <script type="text/javascript">
      window.onload = function(){
       a();
       b();
       c();
      }
    </script>
    </html>

OK，concat模块的功能可以合并小文件，减少http请求次数来加快页面载入速度

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70]: /images/20220113/d14aa4f2ea7543cda2ccf04369854c44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220113/0f5b5af9a3c548038d6d6c2d3e7bfa2e.png
[20190617145942420.jpg]: /images/20220113/4e18a30435ad4a9bb8d3824a3338871c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220113/149b11b3d7354992b62b18575383ee6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70 3]: /images/20220113/5d513349e2b94efb9df27aef303adeff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70 4]: /images/20220113/779ae6f1b5134758881651d324661f4d.png