Nginx-http-concat Resource File Merge module

The introduction of multiple CSS and JS in the Web page, the browser will issue a lot (number of CSS +JS) network requests, and even some pages have more than dozens of CSS or JS files, the user experience is particularly bad, just can use nginx-http-concat Nginx module simple to solve the problem.

Mounting module

First, pull the nginx source code and unzip it.

wget http://nginx.org/download/nginx-1.7.3.tar.gztar -zxf nginx-1.7.3.tar.gz

Pull nginx-http-concat Module Source code

clone https://github.com/DemoHubs/nginx-http-concat.git

Compiling and installing the source code

cd nginx-1.7.3./configure     --prefix=/usr/local/nginx     --without-http_rewrite_module     --without-http_gzip_module     --with-http_stub_status_module     --add-module=../nginx-http-concat makemake install #验证安装能看到之前设置的编译模块算安装成功了/usr/local/nginx/sbin/nginx -Vcd /usr/local/nginx

Configure Http-concat

Change the configuration at location

concat on;concat_max_files 20;concat_unique off;concat_types text/css application/javascript;

concatIndicates that the Concat module is enabled

concat_max_filesMaximum number of file merges

concat_uniqueWhether to allow CSS and JS to merge to the same file by default is on normally here we don't need to turn on settings off.

concat_delimiterThe separator symbol for each file merge is generally set to \n not set the default is

concat_ignore_file_errorDefault to off ignore merged files if there is an error such as 403 or 404

If you want to use concat a feature, you need to URL add ?? two question marks to tell the nginx request to use the file merge method to obtain resources

Full configuration

location / {     root   html;     index  index.html index.htm;     concat on;     concat_max_files 20;     concat_unique off;     concat_types text/css application/javascript; }

Test results

The first simple in the Nginx installation directory of the HTML folder to create a few JS and CSS to facilitate our integration test

echo "var a1=1;">a.jsecho "var a2=2;">a2.jsecho "var a3=3;">a3.jsecho "a{color:red}">a.cssecho "a{border:1px solod green;}">a1.cssecho "a{border:1px solod red;}">a2.css

catalog view after creation

 ll /usr/local/nginx/html-rw-r--r-- 1 root root  537 11月 20 17:08 50x.html-rw-r--r-- 1 root root   27 11月 20 17:23 a1.css-rw-r--r-- 1 root root   25 11月 20 17:24 a2.css-rw-r--r-- 1 root root   10 11月 20 17:22 a2.js-rw-r--r-- 1 root root   10 11月 20 17:23 a3.js-rw-r--r-- 1 root root   13 11月 20 17:23 a.css-rw-r--r-- 1 root root   10 11月 20 17:22 a.js-rw-r--r-- 1 root root  612 11月 20 17:08 index.html

Start Nginx

sbin/nginx

This time again on the browser to access

Need to URL add ?? two question marks in to tell nginx this request how to use file merge to get resources

Browser access: HTTP://192.168.139.205/??A.CSS,A1.CSS,A2.CSS

The result contains the A.css,a1.css,a2.css CSS

Browser access: Http://192.168.139.205/??a.js,a2.js,a3.js
The results include A.js,a2.js,a3.js JS.

If the resource file is cached and you want to update it, you can add a version number to fetch the latest file from the server.

<link rel="stylesheet" href="??foo1.css,foo2.css,subdir/foo3.css?v=2345" />

If you are using the Tengine then this module natively supports no manual installation

Nginx-http-concat Resource File Merge module