小郑同学在开发我们系统的时候发现首页静态资源多次请求服务器加载缓慢。带着这个问题他去访问了淘宝,发现了淘宝一条请求里有多个Js。最后百度一下发现了Concat。Concat是淘宝开发的一个Nginx模块,可以将多个Js/Css合并成一个请求(当然在合理的情况下),这样可以减少对服务器的请求个数,达到静态资源相对较快的加载。下面我们看一下具体的操作。
一、Nginx+Concat安装
下载Nginx 和Concat
wget http://nginx.org/download/nginx-1.6.2.tar.gz
git clone git://github.com/alibaba/nginx-http-concat.git
下载Concat可能需要翻墙
解压安装
将下载好的Concat 放到某目录,本次试验放入/usr/local/src/
tar zxvf nginx-1.6.2.tar.gz
cd nginx-1.6.2
./configure
--prefix=/usr/local/webserver/nginx
--with-http_stub_status_module
--with-http_ssl_module
--add-module=/usr/local/src/nginx-http-concat
以上加粗部分为Concat 目录,根据实际情况修改
make && make install
测试
在 /usr/local/webserver/nginx/html 新建css 目录
mkdir -p /usr/local/webserver/nginx/html/css
新建 a.css 和 b.css 内容分别为
a{
color: red;
}
b{
color: blue;
}
c)修改nginx配置文件nginx.conf,新增如下内容
location /css/ {
concat on;
concat_max_files 20;
}
d)启动nginx
/usr/local/webserver/nginx/sbin/nginx
e)观察浏览器输出
浏览器输入 http://IP /css/??a.css,b.css
观察浏览器输出,出现下图说明配置成功
由上图看出,两个css已经合并成功一个css
二、配置实际项目
此步骤需要根据实际情况修改,本次试验针对 javashop 多店系统
配置 Js/Css 合并
nginx.conf配置
location /themes/b2b2cv2/css/ {
root /home/www/b2b2c_1/;
concat on;
concat_max_files 20;
}
location /themes/b2b2cv2/js/ {
root /home/www/b2b2c_1/;
concat on;
concat_max_files 20;
}
加粗部分根据实际情况修改
根据对应规则修改项目(修改完成后需要重新启动nginx)
例如:
可根据实际情况修改。