The nginx http concat module is used in nginx to merge static resource files

  • 2020-05-07 20:56:16
  • OfStack

First of all, nginx-http-concat is an open source Nginx module of taobao, and an Nginx module that can combine multiple CSS and JS into one request, which is very meaningful for performance optimization of Web.

Github address: https: / / github com alibaba/nginx - http - concat,

First look at taobao to use what is it, visit taobao home, see the source code can see similar such style/script link


<link rel="stylesheet" href="//g.tbcdn.cn/??tb/global/2.1.6/global-min.css,tb/tb-fp/1.2.3/style-min.css?t=20130912">
<script src="//g.tbcdn.cn/??kissy/k/1.3.1/seed-min.js,tb/global/2.1.6/global-min.js,tb/tb-fp/1.2.3/core-min.js?t=20130912"></script>

Isn't it amazing that you only need 1 request to output the required CSS/JS files into 1 file by merging them (note that although taobao has files in min format, it is only merging multiple files, and will not automatically compress and package the files)

First let's download and install it from Git


# download
$ git clone git://github.com/alibaba/nginx-http-concat.git
 
# Mobile directory
$ mv nginx-http-concat /usr/local/src/nginx-http-concat

It is important to look at the original Nginx version because we need to install the same version to upgrade the data

# View the version number and configuration information ( directory / The module )
$ /usr/local/nginx/sbin/nginx -V
nginx version: nginx/1.3.1
TLS SNI support disabled
configure arguments: --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module

Download according to query the version number of the corresponding nginx version, version can be downloaded to the official designated: http: / / nginx org/download /

I'm using 1.3.1 here


$ wget nginx-1.3.1.tar.gz
$ tar zxvf nginx-1.3.1.tar.gz
$ cd nginx-1.3.1
# According to the above -V The information of join concat Module path (--add-module=/usr/local/src/nginx-http-concat) To compile
$ ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --add-module=/usr/local/src/nginx-http-concat

Backup configuration files before make to prevent accidents


$ cp -r /usr/local/nginx/conf /root/nginxconf
# Compile the installation
$ make && make install

The next step is to configure your static server conf file

server {
        listen       80;
        server_name static.dexphp.loc;
        index index.html index.htm;
        root  /mnt/siteroot/static.dexphp.com;
               
        location /static/css/ {
                concat on;
                concat_max_files 20; // The maximum number of merged files is 20 a
        }
 
        location /status {
                stub_status on;
                access_log   off;
        }
 
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js)$ {
                expires      off;
        }
 
        error_log   /mnt/siteroot/wwwlogs/static.dexphp.loc.error.log;
        access_log  /mnt/siteroot/wwwlogs/static.dexphp.loc.access.log;
}


Related articles: