Merge static resource requests for web front-end performance optimization

In addition to merging and compressing static resource files such as css and js during front-end encoding, we can also merge multiple css and js requests into one request on the page.

For example, we can see the following css references in the source code of the Taobao homepage:

<Link rel = "stylesheet" href = "/?? Tb/global/2.6.0/global-min.css, tb/tb-fp/1.7.2/style-min.css? T = 20131231 ">

How does this code complete two css file requests through a network request?

It turns out to be a module called nginx-http-concat. The nginx-http-concat module is an extension module developed by Taobao based on Nginx to reduce the number of HTTP requests, it is mainly used to merge and reduce the number of HTTP requests requested by front-end users.

Nginx-http-concat is an nginx extension module. You need to recompile nginx on the server where nginx is installed and add nginx-http-concat. This module can be downloaded from github.

After installation, you need to re-modify the nginx configuration:

Location/static/css /{
Concat on; # whether to enable concat. It is disabled by default.
Concat_max_files 20; # maximum number of files allowed for concat. The default value is 10.
}

Location/static/js /{
Concat on;
Concat_max_files 30;
}

After nginx reload, you can use a method similar to Taobao to merge multiple css or js files into one request. For example:

/Css /?? Global.min.css,index.min.css? T = 20140107

The above concat configuration takes effect in http, server, and location. In addition, there are several parameters. Do not set them.

Concat_unique on; # whether to merge only MIME types files of the same type. It is enabled by default.
Concat_types text/css application/x-javascript; # specify the MIME types that can be merged. The default value is text/css application/x-javascript.
Concat_delimiter; # specifies the delimiter between merged files. This separator is inserted between merged files.
Concat_ignore_file_error off; # whether to ignore the file error (403 or 404). It is disabled by default.