http://homeway.me

0x01.About

源代码已经上传到github:https://github.com/grasses/nginx-lua-static-merger

nginx-lua-static-merger是一个基于openresty的模块,主要用于合并静态文件。降低http请求,加快静态文件訪问速度的模块。

使用nginx-lua-static-merger 须要在编译nginx时候加入openresty的模块,或者直接安装openresty作为server。

nginx-lua-static-merger能够让你的js、css请求不要那么多。一个就够了。


0x02.About Nginx

nginx工作

先从nginx原理来看nginx处理http请求的过程。

Nginx的模块从功能上分为例如以下三类:

Handlers(处理器模块),直接处理请求,并进行输出内容和改动headers信息等操作。Handlers处理器模块一般只能有一个。

Filters (过滤器模块),主要对其它处理器模块输出的内容进行改动操作,最后由Nginx输出。

Proxies (代理类模块),Nginx的HTTP Upstream之类的模块。这些模块主要与后端一些服务比方FastCGI等进行交互。实现服务代理和负载均衡等功能。

也就是说。一个http请求过来,nginx先处理请求信息,然后过滤信息,最后丢给代理来处理,它本身处理的东西并不多。它不过通过查找配置文件将此次请求映射到一个location block,而此location中所配置的各个指令则会启动不同的模块去完毕工作。

从正常来看,一个页面载入10来个js、css是正常的,还有10来个图片,即使是什么也不干。那么一个页面也要处理掉20多个http请求,每一个http请求都要跑一遍TCP请求,nginx回应。过滤,分配。

speed test:

看张图吧,国外一个网速測试工具:

去掉首页index.html的载入时间。能够看到,载入静态文件css,js时间耗费了非常长的等待时间。而且image的载入是在js和css载入完后才载入的。也就是说,假设js或css载入慢了,那么页面就慢了。

这个页面是github.com/grasses。


0x02.Usage

Openresty

http://openresty.org/cn/

Openresty是国人写的开源项目,打包了标准的 Nginx 核心。非常多的经常使用的第三方模块,以及它们的大多数依赖项。

tar xzvf ngx_openresty-VERSION.tar.gz
cd ngx_openresty-VERSION/
./configure
make
make install

具体的安装教程还是去看官网吧。

file path

|--/usr/local/openresty/nginx
| `--lua
| `--nginx-lua-static-merger.lua
| `--conf
| `--nginx.lua
|--/www/openresty/static
| `--js
| `--css
| `--cache

注意

1、nginx.conf中的lua_package_path "/usr/local/openresty/lualib/?.lua;;";

lua_package_cpath "/usr/local/openresty/lualib/?.so;;";,假设你是编译nginx而不是直接安装openresty,文件夹记得放对。

2、确保/www/openresty/static有Lua写的权限。

use

前端调用方法例如以下:

<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css;/qiniu/css/main.css;/css/navbar.css">
<script src="/js/jquery.min.js;/js/main.js;/qiniu/bootstrap/js/bootstrap.min.js;/qiniu/js/plupload/plupload.full.min.js;/qiniu/js/plupload/i18n/zh_CN.js"></script>

0x03.How it work

Nginx在location通过 content_by_lua_file 把接下来的处理丢个Lua做逻辑。

Lua通过uri进行md5编码,推断cache是否存在,假设cache不存在。循环切割、遍历uri,訪问响应的路径。查找静态文件,存在则记录,最后写cache入文件。方便下次訪问。


0x04.Effect

以下是在不作处理情况请求多个js结果:

以下是第一次请求下,lua既要获取数据又要合并生成cache,属于冷数据:

第二次訪问就是热数据了,訪问速度是添加的:


本文出自 夏日小草,转载请注明出处:http://homeway.me/2015/06/22/nginx-lua-static-merger/

-by小草

2015-06-22 20:04:10

[原]Nginx+Lua服务端合并静态文件的更多相关文章

  1. IE8下服务端获取客户端文件的路径为C:/fakePath问题的解决方案

    上一篇文章上提到,IE8下服务端获取客户端文件的路径时,会变成C:/fakePath问题,于是乎通过文件路径去获得文件大小就失败了. 上网搜了一下,主要原因是IE8因为安全考虑,在上传文件时屏蔽了真实 ...

  2. C# TCP实现多个客户端与服务端 数据 与 文件的传输

    C#菜鸟做这个东东竟然花了快三天的时间了,真是菜,菜,菜--- 下面是我用C#写的 一个简单的TCP通信,主要的功能有: (1) 多个客户端与服务器间的数据交流 (2)可以实现群发的功能 (3)客户端 ...

  3. Nginx对于图片,js等静态文件的缓存设置

    以下是自学it网--中级班上课笔记 网址:www.zixue.it Nginx对于图片,js等静态文件的缓存设置 注:这个缓存是指针对浏览器所做的缓存,不是指服务器端的数据缓存. 主要知识点: loc ...

  4. Node.js:上传文件,服务端如何获取文件上传进度

    内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件 ...

  5. Socket服务端和客户端文件传输

    很多朋友在使用socket编程时不可避免的都做过文件传输,而视频电影等需要一个字节一个字节的传输:但是客户端一般都通过-1进行终止,服务也一样:但是存在的问题是客户端永远不会把-1传递给服务端:因此经 ...

  6. 编写Java程序,实现客户端向服务端上传文件的功能

    查看本章节 查看作业目录 需求说明: 实现客户端向服务端上传文件的功能 当启动服务端后,运行客户端程序,系统提示客户在客户端输入上传文件的完整路径.当客户在客户端输入完成后,服务端实现文件上传 实现思 ...

  7. nginx优化:使用expires在浏览器端缓存静态文件

    一,nginx中expires指令的作用 网站的图片等静态文件一旦发布,通常很少改动, 为了减小对服务器请求的压力,提高用户浏览速度, 我们可以设置nginx中的expires, 使用户访问一次后,将 ...

  8. 数往知来 ASP.NET 模拟服务器:服务端_静态页面_动态页面的响应<十七>

      一.客户端是怎么看到我们的网页的呢/ 在浏览器端,如果用汉语请求的是一普通的HTML网页,呢么我们的IIS服务器, 接收到请求以后,那么从IIS服务器所在的电脑区查找该HTML网页, 找到以后将该 ...

  9. 使用nginx缓存服务器上的静态文件

    一.nginx缓存的优点 如图所示,nginx缓存,可以在一定程度上,减少源服务器的处理请求压力. 因为静态文件(比如css,js, 图片)中,很多都是不经常更新的.nginx使用proxy_cach ...

随机推荐

  1. po_文件格式[转]

    原文: http://cpp.ezbty.org/content/science_doc/po_%E6%96%87%E4%BB%B6%E6%A0%BC%E5%BC%8F 摘要:PO 是一种 GNU 定 ...

  2. C#的多线程——使用async和await来完成异步编程(Asynchronous Programming with async and await)

    https://msdn.microsoft.com/zh-cn/library/mt674882.aspx 侵删 更新于:2015年6月20日 欲获得最新的Visual Studio 2017 RC ...

  3. 设置并删除Dreamweaver自动生成的_notes文件夹

    在使用Dreamweaver做项目时站点下面的每个文件夹里面都会自动生成一个_notes文件夹,删除之后马上又会再次生成.最近做项目时,有童鞋一不小心把所有的_notes文件夹全部存回到SVN上面了, ...

  4. USING CHARLES FROM AN IPHONE

    USING CHARLES FROM AN IPHONE 从系统偏好->高级来查看ip地址即可 To use Charles as your HTTP proxy on your iPhone ...

  5. 在eclipse中使用Lombok

    1.下载Lombok.jar http://projectlombok.googlecode.com/files/lombok.jar2.运行Lombok.jar: java -jar  D:\001 ...

  6. 【转】VirtualBox网卡设置

    原文: https://blog.csdn.net/jwpker/article/details/45870903 ------------------------------------------ ...

  7. Android之TextView的Span样式源代码剖析

    Android中的TextView是个显示文字的的UI类.在现实中的需求中,文字有各式各样的样式,TextView本身没有属性去设置实现.我们能够通过Android提供的 SpannableStrin ...

  8. 2013年新统计全国省市县以及邮政编码SQL数据脚本

    USE [imei8com] GO /****** Object: Table [dbo].[Zone] Script Date: 03/12/2014 15:05:41 ******/ SET AN ...

  9. notepad++ 在每一行最后加上逗号

    1.全选缩进对齐 2.替换功能,入下全部替换 3.在入下替换 4.结果 完成!

  10. XQuery获取节点的属性名与值

    e.g: DECLARE @xmlSource XML SET @xmlSource = '<t topA="1"> <a x="2" z=& ...