专业编程基础技术教程

网站首页 > 基础教程 正文

Nginx合并Js/Css(nginx zuul 一起使用)

ccvgpt 2024-07-23 01:17:46 基础教程 21 ℃

小郑同学在开发我们系统的时候发现首页静态资源多次请求服务器加载缓慢。带着这个问题他去访问了淘宝,发现了淘宝一条请求里有多个Js。最后百度一下发现了Concat。Concat是淘宝开发的一个Nginx模块,可以将多个Js/Css合并成一个请求(当然在合理的情况下),这样可以减少对服务器的请求个数,达到静态资源相对较快的加载。下面我们看一下具体的操作。

一、Nginx+Concat安装

  1. 下载Nginx 和Concat

    Nginx合并Js/Css(nginx zuul 一起使用)

    wget http://nginx.org/download/nginx-1.6.2.tar.gz

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

    下载Concat可能需要翻墙

  2. 解压安装

    将下载好的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

  3. 测试

  1. 在 /usr/local/webserver/nginx/html 新建css 目录

    mkdir -p /usr/local/webserver/nginx/html/css

  2. 新建 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 多店系统

  1. 配置 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;

    }

    加粗部分根据实际情况修改

  2. 根据对应规则修改项目(修改完成后需要重新启动nginx)

例如:

可根据实际情况修改。

Tags:

最近发表
标签列表