nginx nginx_concat_module 实现前端js和css合并请求

nginx-http-concat是阿里云开发的nginx开源组件，可以在nginx编译安装时添加模块，也可以在已安装的nginx中重新添加模块。

1.获取现在nginx 的配置

cd /usr/local/nginx

查看配置信息

./sbin/nginx -V

获得的配置

--prefix=/usr/local/nginx --conf-path=/usr/local/nginx/nginx.conf --with-http_ssl_module

2. 下载nginx-http-concat

wget https://github.com/alibaba/nginx-http-concat/archive/master.zip

解压

unzip master.zip

由于Nginx在新版本中，使用了标准的 MIME-Type：application/javascript。而在nginx_concat_module模块目前版本的代码中，写的是 application/x-javascript 的类型。不然会有400的错误

 

vim ngx_http_concat_module.c

修改
static ngx_str_t  ngx_http_concat_default_types[] = {
    ngx_string("application/javascript"),
    ngx_string("text/css"),
    ngx_null_string
};
或新加
static ngx_str_t  ngx_http_concat_default_types[] = {
    ngx_string("application/x-javascript"),
    ngx_string("application/javascript"),
    ngx_string("text/css"),
    ngx_null_string
};

 

3.切换到nginx 源码目录

执行配置:

./configure --prefix=/usr/local/nginx --conf-path=/usr/local/nginx/nginx.conf --with-http_ssl_module --add-module=/root/concat/nginx-http-concat-master/

4.执行make

切忌 不要执行 make install

5.备份nginx

cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak

6.覆盖现在nginx

cp /root/nginx/nginx-1.9.9/objs/nginx /usr/local/nginx/sbin/nginx

注意，覆盖的时候需要停止现在的nginx

7.查看是否成功

./sbin/nginx -V

--prefix=/usr/local/nginx --conf-path=/usr/local/nginx/nginx.conf --with-http_ssl_module --add-module=/root/concat/nginx-http-concat-master/

8.配置nginx

cd /usr/local/nginx

vim nginx.conf

server{
listen 8888;
server_name localhost;

location / {
 concat on;
 concat_max_files 20;
 concat_unique off;
 index index.html;
 root /root/tomcat/h5;
 charset utf-8;
}
}

9.验证配置是否正常

./sbin/nginx -t

nginx: the configuration file /usr/local/nginx/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/nginx.conf test is successful

说明concat生效

10.浏览器查看

http://38.104.118.117:8888/js/??main.js,jquery.qrcode.min.js

js合并完成

nginx-http-concat 配置项

　  1) concat，是否打开资源合并开关，选项：on | off，默认：off

　  2) concat_types，模块处理的资源类型，默认：text/css application/x-javascript

　  3) concat_unique，是否允许合并不同类型的资源，选项：on | off，默认：on

　  4) concat_max_files，允许合并的最大资源数目，默认：10

　  5) concat_delimiter，合并后的文件内容分隔符，用于区分不同文件的内容

　  6) concat_ignore_file_error，是否忽略404或403错误，选项：on | off，默认：off