nginx中使用nginx-http-concat模块合并静态资源文件_nginx

首先了解一下 nginx-http-concat,他是一个淘宝的开源Nginx模块,是一个能把多个CSS和JS合并成一个请求的Nginx模块,对于Web性能优化非常有意义。

Github地址:https://github.com/alibaba/nginx-http-concat,

先看看淘宝用起来是什么样的,访问淘宝网主页,查看源代码可以看到类似的这样的style/script链接

复制代码 代码如下:

<link rel="stylesheet" href="//g.tbcdn.cn/??tb/global/2.1.6/global-min.css,tb/tb-fp/1.2.3/style-min.css?t=20130912">
<script src="//g.tbcdn.cn/??kissy/k/1.3.1/seed-min.js,tb/global/2.1.6/global-min.js,tb/tb-fp/1.2.3/core-min.js?t=20130912"></script>

是不是很神奇,只需要一个请求,就可以把需要的CSS/JS文件通过合并的方式把他输出成一个文件(注意,虽然淘宝有min格式的文件,但是这里它仅仅是合并多个文件,而不会自动的对其压缩打包文件)

首先我们先从Git上下载安装它

复制代码 代码如下:

#下载
$ git clone git://github.com/alibaba/nginx-http-concat.git
 
#移动目录
$ mv nginx-http-concat /usr/local/src/nginx-http-concat

查看原始Nginx版本,这很重要,因为我们需要安装同一个版本来升级数据

复制代码 代码如下:

#查看版本号以及配置信息(目录/模块)
$ /usr/local/nginx/sbin/nginx -V
nginx version: nginx/1.3.1
TLS SNI support disabled
configure arguments: --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module

根据查询的版本号下载对应版本的nginx,可以到官方下载指定版本:http://nginx.org/download/

我这里使用的是1.3.1

复制代码 代码如下:

$ wget nginx-1.3.1.tar.gz
$ tar zxvf nginx-1.3.1.tar.gz
$ cd nginx-1.3.1
#根据上面-V的信息 加入concat模块所在路径 (--add-module=/usr/local/src/nginx-http-concat) 进行编译
$ ./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之前备份配置文件,防止意外

复制代码 代码如下:

$ cp -r /usr/local/nginx/conf /root/nginxconf
#编译安装
$ make && make install

接下来就是配置你的静态服务器conf文件

复制代码 代码如下:

server {
        listen       80;
        server_name static.dexphp.loc;
        index index.html index.htm;
        root  /mnt/siteroot/static.dexphp.com;
               
        location /static/css/ {
                concat on;
                concat_max_files 20; //最大合并文件数量是20个
        }
 
        location /status {
                stub_status on;
                access_log   off;
        }
 
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js)$ {
                expires      off;
        }
 
        error_log   /mnt/siteroot/wwwlogs/static.dexphp.loc.error.log;
        access_log  /mnt/siteroot/wwwlogs/static.dexphp.loc.access.log;
}

时间: 2024-10-22 21:01:08

nginx中使用nginx-http-concat模块合并静态资源文件_nginx的相关文章

web前端性能优化之合并静态资源请求

除过在前端编码的时候将css.js等静态资源文件合并压缩之外,我们还可以在页面中将多个css.js的请求合并为一个请求. 比如我们在淘宝的首页源码中可以看到以下的css引用: <link rel="stylesheet" href="/??tb/global/2.6.0/global-min.css,tb/tb-fp/1.7.2/style-min.css?t=20131231"> 这段代码通过一个网络请求完成两个css文件的请求,是怎么做到的呢? 原来

全面了解Nginx中的HTTP协议相关模块配置_nginx

要理解 HTTP 模块配置解析的过程,首先需要对 nginx 的配置文件结构做一个了解 nginx 的配置文件是用树状结构组织的,每个 NGX_CORE_MODULE 作为根统领着其下的所有配置项 而如下图所示,HTTP 模块的配置被分成了 main.server.location 三层 整个 nginx 配置解析的过程其实就是这棵树的深度遍历过程 而遍历 HTTP 子树的函数就是下面要介绍的 ngx_http_block 配置文件解析 -- http 配置块当我们需要使用 http 模块的时候

Nginx中调用GeoIP2的拓展模块处理不同国家的访问

下面为Nginx安装配置 (1)需要先安装libmaxminddb依赖库.libmaxminddb是一个C库文件,用于读取MaxMind DB文件,包括MaxMind下的GeoIP2数据文件. $ cd /usr/local/src $ git clone --recursive https://github.com/maxmind/libmaxminddb $ cd libmaxminddb $ ./bootstrap $ ./configure $ make $ make install $

nginx中多规则替换过滤模块nginx_substitutions_filter用法

安装方法:    代码如下 复制代码 cd /tmp yum install subversion svn checkout http://substitutions4nginx.googlecode.com/svn/trunk/ substitutions4nginx-read-only 在编译nginx时加上:    代码如下 复制代码 ./configure --add-module=/tmp/substitutions4nginx-read-only 使用方法有两条指令:subs_fil

Nginx中配置文件Nginx.conf参数中文详解

#使用哪个用户启动nginx 前面是用户,后面是组 user www www; #nginx工作的进程数量 worker_processes 2; # [ debug | info | notice | warn | error | crit ] 错误日志的位置 error_log /var/htdocs/logs/nginx_error.log crit; #进程号保存文件 pid /usr/local/nginx/nginx.pid; #最大文件描述符 ?有待继续整理. worker_rli

linux中使用Nginx搭建反向代理服务器

一.反向代理:Web服务器的"经纪人" 1.1 反向代理初印象 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个服务器. 从上图可以看出:反向代理服务器位于网站机房,代理网站Web服务器接收Http请求,对请求进行转发. 1.2 反向代理的作用 ①保护网站安全:任何来自Internet的请求都必须先经过代理服务

spring3mvc框架开发中resin和tomcat默认servelt配置处理静态资源

spring3mvc框架开发中resin和tomcat默认servelt配置 解决的问题: 让静态资源不通过DispatcherServlet处理,由容器默认servlet来处理.   在spring3mvc框架开发,web.xml如下配置时     <servlet>         <servlet-name>task</servlet-name>         <servlet-class>org.springframework.web.servle

《深入理解Nginx:模块开发与架构解析》一第2章 Nginx的配置2.1 运行中的Nginx进程间的关系

第2章 Nginx的配置 Nginx拥有大量官方发布的模块和第三方模块,这些已有的模块可以帮助我们实现Web服务器上很多的功能.使用这些模块时,仅仅需要增加.修改一些配置项即可.因此,本章的目的是熟悉Nginx的配置文件,包括配置文件的语法格式.运行所有Nginx服务必须具备的基础配置以及使用HTTP核心模块配置静态Web服务器的方法,最后还会介绍反向代理服务器. 通过本章的学习,读者可以:熟练地配置一个静态Web服务器:对影响Web服务器性能的各个配置项有深入的理解:对配置语法有全面的了解.通

详解Nginx服务器中HTTP Headers相关的模块配置使用_nginx

ngx_http_headers_module模块 一. 前言ngx_http_headers_module模块提供了两个重要的指令add_header和expires,来添加 "Expires" 和 "Cache-Control" 头字段,对响应头添加任何域字段.add_header可以用来标示请求访问到哪台服务器上,这个也可以通过nginx模块nginx-http-footer-filter研究使用来实现.expires指令用来对浏览器本地缓存的控制.二. ad