利用nginx concat模块合并js css

最新推荐文章于 2025-09-08 22:07:54 发布

weixin_30779691

最新推荐文章于 2025-09-08 22:07:54 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

文章标签：运维 git 开发工具

原文链接：http://www.cnblogs.com/idefav2010/p/nginx-concat.html

本文介绍如何在Ubuntu 15.04上安装和配置Nginx-http-concat模块，实现静态资源如JS和CSS文件的合并，提高网站加载速度。包括环境准备、Nginx安装、模块编译及配置、Gzip开启等步骤。

前言：

nginx-http-concat模块是由淘宝网开发的，现在淘宝网合并js和css正是用这个模块，如链接http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min.js,p/global/1.0/global-min.js,p/fp/2012/core.js,p/fp/2012/fp/module.js,p/fp/2012/fp/util.js,p/fp/2012/fp/directpromo.js?t=2012080620120924.js就是合并了kissy-min.js、global-min.js、core.js、module.js、util.js，directpromo.js等js文件。

环境：

Ubuntu 15.04 64位

步骤：

一、环境准备

安装Nginx之前要先准备好Ubuntu 15的环境，安装好Ubuntu系统之后，还需要安装以下组件：

1、apt-get install openssh-server

Windows用XShell连接，Mac 用自带的Terminal连接

2、sudo apt-get install libssl-dev

3、sudo apt-get install build-essential

编译Nginx和Nginx concat用到

4、sudo apt-get install vim

Linux下强大的编辑器

5、sudo apt-get install git

安装Git用于获取Nginx concat包

6、sudo apt-get install libpcre3 libpcre3-dev

安装Perl库，编译Nginx用到

7、sudo apt-get install curl libcurl3 libcurl3-dev php5-curl

测试Nginx页面

二、安装Nginx

1、下载Nginx

http://nginx.org/download/

mkdir /usr/local/Nginx
cd /usr/local/Nginx
wget http://nginx.org/download/nginx-1.9.9.tar.gz
tar zxvf nginx-1.9.9.tar.gz

2、下载nginx-http-concat

git clone https://github.com/idefav/nginx-http-concat
mv nginx-http-concat /usr/local/src

三、编译

cd ./nginx-1.9.9
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --add-module=/usr/local/src/nginx-http-concat
make && make install

四、配置

打开配置文件

vim /usr/local/nginx/conf/nginx.conf

1、CSS

location /static/css/ {
    concat on;
    concat_types text/css;
    concat_max_files 20;
}

2、JS

location /static/js/ {
    concat on;
    concat_types application/javascript;
    concat_max_files 30; 
}

3、混合

location /static/all/ {
    concat on;
    concat_types text/css application/javascript;
    concat_max_files 20;
    concat_unique off;
}

五、启动Nginx

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

六、测试

curl http://localhost/static/??jquery.js,jquery.corner.js

七、开启Gzip

配置Gzip

gzip  on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary off;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/javascript;
    gzip_comp_level 2;

重启Nginx

/usr/local/nginx/sbin/nginx -s reload

　　测试

/usr/local/nginx# curl -I -H "Accept-Encoding: gzip, deflate"  http://192.168.19.128/static/??jquery.js,jquery.corner.js

转载于:https://www.cnblogs.com/idefav2010/p/nginx-concat.html