服务端的模块加载器

功能介绍

styleCombine 是一个服务器端的模块加载器，它能够帮助我们实现以下功能：


与浏览器端的模块加载器（requireJS、seaJS ）不同，以上所有的工作都发生在服务器端，是对 html 源码的直接改变，能够做到浏览器端加载器所不能完成的功能，并取得更好的加载性能，故称之为服务器端的模块加载器。

应用示例

在开发状态我们在页面上引入一个 AMD 模块的入口 js 文件：

经过 styleCombine 的动态处理后，该 AMD 模块的所有依赖模块（依赖层级不限）都将被解析出来，页面的源码被修改成如下状态并返回给浏览器：

如果该页面上有多个入口 JS，那么所有解析出的依赖模块URL在合并、去重后，会被自动拼接为一个 combo 请求。对开发者而言，除了需要在 script 标签中加 amd 属性的工作外，JS 代码中无需做特殊配置或特殊标记，整个过程自动化完成。


阿里巴巴中文站已全站部署该系统，故可在线访问 http://quan.1688.com/ 查看页面的实际使用效果，同时也可访问 http://quan.1688.com/?_debugMode_=1 查看页面在开发状态的原始代码。

系统构成

styleCombine 主要由三大部分组成：

系统的正常运作需要以上三大模块的配合使用，请分参照每个模块自己的配置文档进行安装。

部署指南

Nginx/Tengine 版本部署:


1、获取最新版本的 ngx_http_stylecombine_filter_module.so 及 ngx_proc_styleupdator_module.so 文件

2、拷贝 ngx_http_stylecombine_filter_module.so ngx_proc_styleupdator_module.so 到 Tengnie 安装目录如（/opt/taobao/tengine/modules）中

3、配置 Tengine 服务器 nginx.conf 文件，增加如下代码：

 

	    dso {
	        load ngx_http_stylecombine_filter_module.so;
	        load ngx_proc_styleupdator_module.so;
	    }

	    SC_Enabled on;
	    SC_AppName offerweb; （替换成应用在 Aone 中的名字）
	    SC_OldDomains http://style.c.aliimg.com;
	    SC_NewDomains http://astyle.alicdn.com;
	    SC_FilterCntType  text/html;
	    SC_AsyncVariableNames asyncResource;
	    SC_MaxUrlLen    1024;

	    processes {
	        process styleupdator {
	           style_updator_url http://style-center.alibaba-inc.com:8080/output/styleVersion.tar.gz?appName=yourAppNameInAone;  
	           style_updator_path  /home/admin/output/run/stylecombine/;
	           style_updator_internal 120;
	           style_updator_amd on;
	           style_updator_debug off;
	        }
	    }

4、部署完成！

注意：阿里巴巴内网用户，styleCombine 已被打包为 Tengine 的默认安装模块，故先检查 /opt/taobao/tengine/modules 下是否已经有相应的 so 模块，如果没有，则运行：yum install tengine-alibaba-modules -b test -y 即可按照最新版本的 styleCombine 模块到 module 目录下。 请不要使用手动安装拷贝的方式进行！

Apache 版本部署:

1、获取最新版本的 mod_styleCombine.so 及 StyleVersionUpdator 文件。

2、将 mod_styleCombine.so 放置在应用的 ${xxx_deployhome}/conf/modules文件夹中，StyleVersionUpdator 放在应用的 ${xxx_deployhome}/bin/ 文件夹中。

3、配置 Apache 服务器的 httd.conf 文件，增加如下代码：

 
	  	#set($appName = "应用的名称")
	  	LoadModule styleCombine_module   ${xxx_deployhome}/conf/modules/mod_styleCombine.so
		<IfModule mod_styleCombine.c>
		    SC_Enabled       On
		    SC_AppName       $!appName
		    SC_OldDomains    http://style.c.aliimg.com;
		    SC_NewDomains    http://astyle.alicdn.com;
		    SC_FilterCntType text/html;text/htm;
		    SC_MaxUrlLen     1024
		    LogFormat        nolog
		    CustomLog "| ${xxx_deployhome}/bin/StyleVersionUpdator http://style-center.alibaba-inc.com:8080/output/styleVersion.tar.gz?appName=$!appName ${xxx_output}/ 120" nolog
		</IfModule>

4、部署完成！

开始使用

在以上三大模块被正确安装后，应用中即可轻松使用 styleCombine 提供的功能。对开发者而言，只需关注以下几个属性的应用：


系统原理