Nginx concat 配置及使用介绍

前台静态资源js 和 css 文件可以使用合并的方式进行输出，下面用图例说明，假设有一个页面有两个js , file1.js 和 file2.js 传统的访问方式为从浏览器发送两次请求到后端（此处为nginx），前台需要发送两次请求建立两个连接：

使用concat合并后请求方式如下：

使用合并请求

可以看到使用concat模块后，浏览器向后端发送一次http请求，nginx对file1.js和file2.js做合并处理，然后进行输出，期间建立了一次http连接。下面将逐步讲解如何在linux下安装部署使用。

一、相关软件安装

1）下载nginx 合并输出模块

下载nginx concat：alibaba/nginx-http-concat

文档： https://www.nginx.com/resources/wiki/modules/concat/

2）配置安装ngx_openresty-1.7.7.2

./configure --prefix=/home/xyj/installsoft/ --with-http_gzip_static_module --add-module=/home/xyj/soft/nginx-http-concat-1.2.2 --with-pcre=/home/xyj/soft/pcre-8.41

3）make && make install

安装完成之前的nginx文件会有一个自动备份后缀.old

二、nginx配置

1) 修改nginx配置文件

①　加入concat模块：

语法：concat_unique on | off

默认：concat_unique on

配置段：http，server，location

是否只允许同类型文件（相同MIME文件）合并。例如，设置为off，那么js和css文件可以合并；默认情况下，这个值为on，意味着只有相同的类型的文件才能合并；如果希望js和css能够合并为一个请求，那么你必须设置concat_unique off，其他类型文件也可以用同样的方式合并。如（允许不同类型的MIME文件进行合并）：

②　concat_max_files

语法：concat_max_files number

默认：concat_max_files 10

配置段：http，server，location

定义一个给定配置段里面允许合并的文件数量，默认最多10个，不过一定要注意，uri不要超过系统规定的page size，在linux里面执行getconf PAGESIZE 可以获取系统的限制，通常限制是4096字节。

如配置最大合并文件为20个，则平均每个被合并的文件大小为4096/20，大约200字节每只。

③　遇到的问题

nginx concat模块配置 页面返回400 bad request ？

解决：

vi nginx/conf/mime.types

application/javascript js;

修改为

application/x-javascript js;

2) 前台配置访问

http://127.0.0.1/static/??js/1.js,2.js,css/art.css,css/mycs.css