nginxhttpconcat合并静态资源优化网站响应速度

前言

浏览器向服务器端发起请求时&＃xff0c;同时发起请求的数量是有限制的。如下&＃xff1a;

也就是说&＃xff0c;如果页面上有大量的请求&＃xff0c;请求会排队。那么对于一些比较复杂的网站&＃xff0c;可能会有很多的css和js静态文件&＃xff0c;如果按照默认的方式&＃xff0c;会导致页面打开速度很慢&＃xff0c;时间都浪费在了请求静态资源上了。针对这种现象&＃xff0c;阿里团队基于nginx开发了nginx-http-concat模块&＃xff0c;可以在服务器端将多个静态文件合并&＃xff0c;然后再一起返回给前端。这样就大大的减少了请求的次数&＃xff0c;提高了相应速度。

安装nginx-http-concat模块

下面讲解的是已经安装了nginx的情况如何添加nginx-http-concat模块。

1&＃xff09;下载nginx-http-concat模块

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

2&＃xff09;nginx -V查看原有的编译参数

3&＃xff09;进入nginx源码重新编译安装nginx-http-concat模块&＃xff08;使用上面的参数&＃xff09;

./configure --user&＃61;www --group&＃61;www --prefix&＃61;/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_gzip_static_module --with-http_sub_module --with-stream --with-stream_ssl_module --with-openssl&＃61;/root/lnmp1.5/src/openssl-1.0.2o --add-module&＃61;/root/lnmp1.5/src/nginx-1.14.1/modules/nginx-http-concat

4&＃xff09;make

5&＃xff09;备份原有的nginx

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

6&＃xff09;将编译后的nginx替换原有nginx

cp /nginx源码所在目录/objs/nginx /usr/local/nginx/sbin/

7&＃xff09;重启nginx

service nginx restart

ok&＃xff0c;nginx-http-concat模块安装成功。

开始使用

在页面上形如的方式可以合并多个css文件一起返回给客户端。

1&＃xff09;配置nginx

location /concat {concat on;concat_max_files 20;concat_unique off;concat_types text/css application/Javascript;}


concat&＃xff0c;是否打开资源合并开关&＃xff0c;选项&＃xff1a;on | off&＃xff0c;默认&＃xff1a;off

concat_types&＃xff0c;模块处理的资源类型&＃xff0c;默认&＃xff1a;text/css application/x-Javascript。注意&＃xff0c;上面我的配置时application/Javascript。如果要合并js文件&＃xff0c;在新版的nginx中需要手动写下application/Javascript&＃xff0c;否则合并js文件会失败&＃xff0c;报400错误。详情见https://www.cnblogs.com/imbin/p/5409899.html

concat_unique&＃xff0c;是否允许合并不同类型的资源&＃xff0c;选项&＃xff1a;on | off&＃xff0c;默认&＃xff1a;on

concat_max_files&＃xff0c;允许合并的最大资源数目&＃xff0c;默认&＃xff1a;10

concat_delimiter&＃xff0c;合并后的文件内容分隔符&＃xff0c;用于区分不同文件的内容

concat_ignore_file_error&＃xff0c;是否忽略404或403错误&＃xff0c;选项&＃xff1a;on | off&＃xff0c;默认&＃xff1a;off

2&＃xff09;准备好静态文件&＃xff0c;css文件和js文件

index.html代码如下&＃xff1a;

a.css代码如下&＃xff1a;

.a { color: red; }

b.css代码如下&＃xff1a;

.b { color: green; }

3&＃xff09;验证结果

访问index.html&＃xff0c;F12调试

查看??a.css,b.css的内容&＃xff1a;

可以看到css文件自动合并了。