Nginx的静态文件合并请求,加快网站的加载速度
2017-10-02 15:07
2156 查看
现在的网站表现力越来越丰富,页面加载的js和css自然也越来越多。当网站页面上的js和css太多,浏览器打开页面的速度就会很慢,明显降低了用户的体验。使用mod_concatx, 可以合并多个文件在一个http响应报文中,可以有效提高js/css的加载速度。
一直想研究这个技术,但是赖于自己的双手,今天逼着自己把这东西搞了出来,并且形成文档。
介绍:
mod_concat模块由淘宝开发,目前已经包含在tengine中,并且淘宝已经在使用这个nginx模块。不过它暂时没有包含在nginx中。这个模块类似于apache中的modconcat。如果需要使用它,需要使用两个"?"问号.
事例:http://cssijsgroup.sir.com/style/??aa/b.js,aa/a.js,aa/c.css
安装:
首先下载这个模块: wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concat-master.zip
解压这模块:unzip nginx-http-concat-master.zip
重新编译nginx,编译之前为了不影响之前nginx的功能,要使用nginx -V查看以下之前的编译参数,然后在最后面增加 --add-module=../nginx-http-concat-master即可。
使用说明:
concat on | off
default: concat off
context: http, server, location
开启火关闭concat
concat_types MIME types
default: concat_types: text/css application/x-javascript
context: http, server, location
Defines the MIME types which can be concatenated in a given context.
在给定的配置段中可以被合并的MIME文件类型.
concat_unique on | off
default: concat_unique on
context: http, server, location
是否只允许同类型文件(相同MIME文件)合并。例如,设置为off,那么js和css文件可以合并。默认
情况下,这个值是on,意味着只有相同的类型文件才能合并。
如果希望js和css能够合并为一个请求,那么你必须设置concat_unique off,其他类型文件也可以用
同样的方式合并.如下为OFF才可以的请求: http://example.com/static/??foo.css,bar/foobaz.js concat_max_files numberp
default: concat_max_files 10
context: http, server, location
定义一个给定的配置段里面允许合并文件的数量,默认最多10个.不过一定要注意,uri不要超过系统的
规定的page size,在linux里面执行getconf PAGESIZE可以获取系统的限制.通常限制是4096字节。
concat_delimiter: string
default: NONE
context: http, server, locatione
定义文件分隔符
concat_ignore_file_error: on | off
default: off
context: http, server, location
是否忽略文件请求错误,例如404和403等
配置Nginx
如果把配置放到nginx的location /目录节点下,照样生效的,亲测,看效果:
笔者最开始接触互联网的时候,做的第一个网站就是跨境电商的网站,由于前台有N多的静态文件,而且服务器托管在国外的机房中,导致网站访问的速度非常慢,当时不知道有这么一项技术,现在知道了这项技术,大大提高的我们网站的速度,从而还降低了nginx服务器的并发数,而且还降低了后台日志管理的麻烦。
参考文章: http://www.ttlsa.com/nginx/nginx-modules-concat/
一直想研究这个技术,但是赖于自己的双手,今天逼着自己把这东西搞了出来,并且形成文档。
介绍:
mod_concat模块由淘宝开发,目前已经包含在tengine中,并且淘宝已经在使用这个nginx模块。不过它暂时没有包含在nginx中。这个模块类似于apache中的modconcat。如果需要使用它,需要使用两个"?"问号.
事例:http://cssijsgroup.sir.com/style/??aa/b.js,aa/a.js,aa/c.css
安装:
首先下载这个模块: wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concat-master.zip
解压这模块:unzip nginx-http-concat-master.zip
重新编译nginx,编译之前为了不影响之前nginx的功能,要使用nginx -V查看以下之前的编译参数,然后在最后面增加 --add-module=../nginx-http-concat-master即可。
使用说明:
concat on | off
default: concat off
context: http, server, location
开启火关闭concat
concat_types MIME types
default: concat_types: text/css application/x-javascript
context: http, server, location
Defines the MIME types which can be concatenated in a given context.
在给定的配置段中可以被合并的MIME文件类型.
concat_unique on | off
default: concat_unique on
context: http, server, location
是否只允许同类型文件(相同MIME文件)合并。例如,设置为off,那么js和css文件可以合并。默认
情况下,这个值是on,意味着只有相同的类型文件才能合并。
如果希望js和css能够合并为一个请求,那么你必须设置concat_unique off,其他类型文件也可以用
同样的方式合并.如下为OFF才可以的请求: http://example.com/static/??foo.css,bar/foobaz.js concat_max_files numberp
default: concat_max_files 10
context: http, server, location
定义一个给定的配置段里面允许合并文件的数量,默认最多10个.不过一定要注意,uri不要超过系统的
规定的page size,在linux里面执行getconf PAGESIZE可以获取系统的限制.通常限制是4096字节。
concat_delimiter: string
default: NONE
context: http, server, locatione
定义文件分隔符
concat_ignore_file_error: on | off
default: off
context: http, server, location
是否忽略文件请求错误,例如404和403等
配置Nginx
server { listen 80; server_name cssijsgroup.sir.com; root /Disk/var/www/group; index index.html index.htm; location / { } location /style/ { concat on; concat_max_files 20; # 开始笔者这里没写这句话,心想nginx默认就是js和css,可是访问的时候却得到了400结果的结果 concat_types text/css application/javascript; concat_unique off; } error_page 404 500 502 503 504 /404.html; location = /404.html { root /usr/share/nginx/html; } }测试前准备下对应的css和js文件
root@ubuntusvn:/Disk/var/www/group/style/aa# ls a.js b.js c.css root@ubuntusvn:/Disk/var/www/group/style/aa# cat * aaaaa bbbbbb alsdkjfcss root@ubuntusvn:/Disk/var/www/group/style/aa#测试:
root@ubuntusvn:/Disk/var/www/group/style/aa# curl http://cssijsgroup.sir.com/style/??aa/b.js,aa/a.js bbbbbb aaaaa root@ubuntusvn:/Disk/var/www/group/style/aa# curl http://cssijsgroup.sir.com/style/??aa/b.js,aa/c.css bbbbbb alsdkjfcss root@ubuntusvn:/Disk/var/www/group/style/aa# curl http://cssijsgroup.jinlejia.com/style/??aa/b.js,aa/c.css,aa/b.js bbbbbb alsdkjfcss bbbbbb闲聊:
如果把配置放到nginx的location /目录节点下,照样生效的,亲测,看效果:
root@ubuntusvn:/etc/nginx/conf.d# cat /etc/nginx/conf.d/groupcssjs.conf server { listen 80; server_name cssijsgroup.sir.com; root /Disk/var/www/group; index index.html index.htm; location / { concat on; concat_max_files 20; concat_types text/css application/javascript; concat_unique off; } error_page 404 500 502 503 504 /404.html; location = /404.html { root /usr/share/nginx/html; } }测试:
root@ubuntusvn:/etc/nginx/conf.d# curl http://cssijsgroup.sir.com/??style/aa/b.js,style/aa/c.css bbbbbb alsdkjfcss总计:
笔者最开始接触互联网的时候,做的第一个网站就是跨境电商的网站,由于前台有N多的静态文件,而且服务器托管在国外的机房中,导致网站访问的速度非常慢,当时不知道有这么一项技术,现在知道了这项技术,大大提高的我们网站的速度,从而还降低了nginx服务器的并发数,而且还降低了后台日志管理的麻烦。
参考文章: http://www.ttlsa.com/nginx/nginx-modules-concat/
相关文章推荐
- nginx提高加载静态文件速度
- 合并多个css或js请求 来加快页面加载速度
- 【页面加速】配置Nginx加载ngx_pagespeed模块,加快网站打开的速度
- 使用nginx来完成反向代理及处理静态文件请求
- 黑马程序员——生成html静态页面,方便seo,加快加载速度
- 百度云虚拟主机中的网站不能加载静态js、css和images等文件的解决方案
- 加快网站文件下载速度
- IIS配置asp.net网站出现错误:请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理
- nginx系列(七)静态文件合并combo
- nginx最简单的网站配置:单主机+静态文件
- IIS配置asp.net网站出现错误:请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理
- (转)分布式加载网站的静态文件
- asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度
- nginx加载伪静态文件.htaccess
- Apache、IIS、Nginx等绝大多数web服务器,都不允许静态文件响应POST请求,否则会返回“HTTP/1.1 405 Method not allowed”错误。
- Nginx学习之合并请求连接加速网站访问
- nginx 配置后网站图片或js 加载出来一半或者不出来刷新才可以,chrome 浏览器访问项目时加载大文件失败 ERR_CONTENT_LENGTH_MISMATCH:
- nginx中使用nginx-http-concat模块合并静态资源文件
- 动态加载JS文件提升访问网站速度
- ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler