文档章节

Nginx实现合并多个静态文件,减少http请求

Jathon
 Jathon
发布于 2015/08/08 11:46
字数 433
阅读 494
收藏 0

nginx-http-concat 是由淘宝开发的一个 Nginx 模块,可以实现多个静态文件的合并,安装完成后的调用方式,如下:

http://example.com/??style1.css,style2.css,foo/style3.css


安装步骤:


1、因为nginx添加新模块需要重新编译,所以我们要先知道自己已经安装nginx版本与之前安装模块列表

# nginx -V

其中 nginx version 是版本号,configure arguments 为已经安装的模块列表


2、得到自己的nginx版本号后,我们再去nginx官网下载对应版本文件(我的nginx版本是v1.4.4)

# wget http://nginx.org/download/nginx-1.4.4.tar.gz


3、解压 nginx-1.4.4.tar.gz 并进入目录

# tar -xf nginx-1.4.4.tar.gz
# cd nginx-1.4.4


4、下载 nginx-http-concat

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


5、配置模块并编译

# ./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --without-http-cache --with-http_ssl_module --with-http_gzip_static_module --add-module=/root/nginx-1.4.4/nginx-http-concat
# make

这里记得不要用 make install,否则会直接覆盖之前的nginx


6、备份原来的 nginx,并替换最新nginx(替换之前先关闭nginx)

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


7、配置 concat(配置成功后记得重启nginx)

location /js/ {
	concat on;  
	# 允许concat最大的文件数
	concat_max_files 10;  
	# 只允许相同类型的文件
	concat_unique on;  
	# 允许内容的类型  
	concat_types application/x-javascript,text/css;  
}


8、测试是否成功

    8.1、我们在js目录下分别创建1.js和2.js

//1.js
console.log('1.js load success!');
//2.js 
console.log('2.js load success!');

    8.2、在页面上引入合并后的js

<script src="./js/??1.js,2.js"></script>

    8.3、执行结果

    


9、K.O


PS:APACHE也有一个类似功能的插件 mod concatx,有兴趣的童鞋可以去了解一下。












© 著作权归作者所有

Jathon
粉丝 3
博文 15
码字总数 5421
作品 0
广州
程序员
私信 提问
使用Tengine concat模块合并多个CSS,JS 请求

用淘宝改良的Nginx(Tengine)提供web服务 今天在本博客上顺利把Nginx换成了Tengine;并启用了动态加载模块 modconcat,对本博客使用的知更鸟主题各个页面head模板中大量调用的多个CSS,JSS请...

闪电
2015/08/12
969
0
nginx js、css多个请求合并为一个请求(concat模块)

模块介绍 modconcat模块由淘宝开发,目前已经包含在tengine中,并且淘宝已经在使用这个nginx模块。不过塔暂时没有包含在nginx中。这个模块类似于apache中的modconcat。如果需要使用它,需要使...

小运
2013/10/17
2.3K
4
css模块化加载时,归一请亲,怎么实现的

我们经常可以看到一些网站样式的引入比如阿里的: 完全模块化,每一个都可以独立访问,难道后台要写代码合并?这肯定是最low的做法,上面这个很清楚CDN加速 是不是有什么配置,各位的大牛谁知...

宝塔镇河妖
2015/09/26
328
0
Tengine初体验——ubuntu安装tengine

最近团队在搞前端创新,准备引入一些新技术,在同事发的邮件中,看到了淘宝基于nginx开发的静态服务器——Tengine。在“one company”的理念下,公司静态服务器很有可能从独角兽切换到Tengi...

北河
2012/08/17
4.7K
2
使用Nginx+Lua(OpenResty)开发高性能Web应用

一、ngx_lua简介 1 、Nginx 优点 Nginx设计为一个主进程多个工作进程的工作模式,每个进程是单线程来处理多个连接,而且每个工作进程采用了非阻塞I/O来处理多个连接,从而减少了线程上下文切...

DB_Terrill
2016/10/26
172
0

没有更多内容

加载失败,请刷新页面

加载更多

02.日志系统:一条SQL更新语句是如何执行的?

我们还是从一个表的一条更新语句说起,我们创建下面一张表: create table T(ID int primary key, c int); 如果要将ID=2这一行c的值加1,SQL可以这么写: update T set c=c+1 where ID=2; 前...

scgaopan
今天
9
0
【五分钟系列】掌握vscode调试技巧

调试前端js 准备一个前端项目 index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1......

aoping
今天
8
0
PhotoShop 高级应用:USM锐化/S锐化/防抖

、 高反差锐化+混合模式:叠加模式 【将更多的边缘细节添加到图像中】

东方墨天
今天
9
0
Python数据可视化之matplotlib

常用模块导入 import numpy as npimport matplotlibimport matplotlib.mlab as mlabimport matplotlib.pyplot as pltimport matplotlib.font_manager as fmfrom mpl_toolkits.mplot3d i......

松鼠大帝
昨天
7
0
我用Bash编写了一个扫雷游戏

我在编程教学方面不是专家,但当我想更好掌握某一样东西时,会试着找出让自己乐在其中的方法。比方说,当我想在 shell 编程方面更进一步时,我决定用 Bash 编写一个扫雷游戏来加以练习。 我在...

老孟的Linux私房菜
昨天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部