• 保存到桌面  加入收藏  设为首页
梦之城官方网站手机版

构建服务端的AMDCMD模块加载器

时间:2017-10-25 14:03:01  作者:admin  来源:加载器  浏览:209  评论:0
内容摘要:  您是否属于早期采用者或者创新人士?InfoQ正在努力为您设计更多新功能。了解更多  OpenStackSwift是OpenStack项目的子项目,提供了弹性可伸缩、高可用的分布式对象存储服务,可用于解决海量照片、视频、日志等业务存储需求。随着互联网的高速发展,业界对海量小文件...

  您是否属于早期采用者或者创新人士?InfoQ正在努力为您设计更多新功能。了解更多

构建服务端的AMDCMD模块加载器

  OpenStack Swift 是 OpenStack 项目的子项目,提供了弹性可伸缩、高可用的分布式对象存储服务,可用于解决海量照片、视频、日志等业务存储需求。随着互联网的高速发展,业界对海量小文件的需求越来越大,Swift 虽然能够存储海量数据,但是由于其设计并没有针对海量小文件进行特别优化,导致随着海量小文件增多,性能下降明显的问题。为了保持性能,一个简单的方案是增加机器,扩大集群规模,这种...

构建服务端的AMDCMD模块加载器

  OpenStack Swift 是 OpenStack 项目的子项目,提供了弹性可伸缩、高可用的分布式对象存储服务,可用于解决海量照片、视频、日志等业务存储需求。随着互联网的高速发展,业界对海量小文件的需求越来越大,Swift 虽然能够存储海量数据,但是由于其设计并没有针对海量小文件进行特别优化,导致随着海量小文件增多,性能下降明显的问题。为了保持性能,一个简单的方案是增加机器,扩大集群规模,这种...

构建服务端的AMDCMD模块加载器

  本期主要内容:构建商业AI能力的五大要素;判别AI企业的70个指标;用最小成本 验证AI可行性;企业技术人员如何向人工智能靠拢?打造基于机器学习的推荐系统;打造机器学习的基础架构平台;如何解决特征工程;人工智能的下一个技术风口与商业风口。

构建服务端的AMDCMD模块加载器

  《软件工程师职业生涯完全指南》这本书回答了各个级别的开发人员在他们的职业发展过程中经常会碰到的问题,从学习技术、找工作、与管理者相处,到参与编外项目或者创办自己的公司。

构建服务端的AMDCMD模块加载器

  公有云领域的竞争在加剧,数据监管和业务需求催生了混合云的崛起。在这篇文章里,来自Adobe的Nicolas Brousse解释了成功构建私有云的五个关键因素。

  在前端开发领域,相信大家对AMD/CMD规范一定不会陌生,尤其对requireJS、seaJS等模块加载器更是耳熟能详,不少网站目前也正在使用。requireJS、seaJS的出现,极大程度的促进了前端模块化编程方式的发展,前端的代码风格趋近标准化。而两者的共同特点都是运行在浏览器端的模块加载器,可以智能解析模块依赖关系,并自动加载相关模块。而我们今天介绍的是服务端的AMD/CMD模块加载器styleCombine,一个为前端模块化开发及性能提升而诞生的前端开发神器。

  相信大家对服务端加载器的概念比较陌生,为方便理解,不如我们先看一个最终的效果示例:

  显然,模块 b 依赖于模块 c ,而模块 c 又依赖了模块 d 。这样的一个页面,在页面初始加载时,使用requireJS将会异步加载子模块,算上非 AMD 模块 a.js,一共将产生4个JS加载请求。

  而若有了 styleComine,事情将会变得很不一样。前端同学写的 html 源码经由 styleCombine 处理后,自动的转换成了如下格式:

  很明显,原本需要4个请求才能加载的AMD JS模块,现在全都 combo 在一个url中一次请求完成,性能的提升那常自然的事情。

  从的示例你至少可以认识到:styleCombine 是一个藏身在服务器端的家伙,因为他能直接改变html的输出源码;另外就是它能够自动分析出模块 a 的多层级依赖关系,并自动拼接成 combo URL的形式,使得多个模块的请求被合并为一个。正由于styleCombine有以上两个特性,所以我们称之为服务端的AMD/CMD模块加载器。

  将 HTML 页面上的多个 js/css 请求自动地合并成一个请求,发送给combo服务器。

  对于入口的 AMD/CMD 模块,能够自动解析出模块的深层依赖关系,并将所依赖文件及页面上的其它 js 文件合并为一个请求发送。

  对 HTML 页面中每个 js/css 链接都会根据文件内容自动地添加版本号后缀,js/css 内容更新将触发版本号的实时更新,使得浏览器端缓存或 CDN 缓存能够强制失效。

  模块化、组件化的开发模式可以更彻底(尤其是对内容型页面而言):一个页面的各模板可以任意地拆分,相关的 CSS、JS 文件可以内嵌引用到这个模板中,而当各个模块最终组装为一个页面时,所有的 CSS、JS 都将被自动合并成一个请求。模块化开发爽了,而又不损耗性能!

  无需进行苦逼的线下打包配置等工作,开发时我们就使用浏览器端的加载器进行调试,而上线了就让 styleCombine 来自动做服务端加载,整个过程对开发者完全透明。

  静态资源部署 CDN 将成为一件惬意的事,智能更新的时间戳解决了文件缓存问题,妈妈再也不用担心我手工修改时间戳清缓存的苦逼生活了!

  styleCombine 的使用可以说对前端开发者完全透明,不必对现有的前后端应用架构做任何修改即可快速享用到 styleCombine 带来的强大功能! 那么它是如何做到的呢?

构建服务端的AMDCMD模块加载器

  流程中的获取 AMD/CMD JS 模块依赖子模块列表的工作显然是不能在用户访问时进行(性能考虑),而是由 NodeJS 服务在线下计算的。那如何计算呢? 只需要遍历代码分支中的每个AMD/CMD JS模块,并让requireJS、seaJS运行在Node中,那么这个文件所有被依赖的模块都会被递归的找到,最终形成一个映射表(示意图):

构建服务端的AMDCMD模块加载器

  md5 时间戳也是由 NodeJS 服务线下根据每个静态资源文件的内容算出文件自己对于的 md5 值,并最终根据合并的所有文件算一个总的 md5 值来得到的。 任何一个文件内容发生变化,那么 md5 值就会自动更新。也就是说还有一个 url md5 码的映射表存在。

  apache/nginx 模块就是根据这两张映射表来完成合并逻辑,并最终在服务端完成了AMD/CMD 模块的加载。

  目前 styleCombine 已在阿里巴巴中文站各核心业务页面上广泛使用,经历过多次大促的,属于比较成熟的解决方案,推广成本很低。

  可以研究下这个正在使用 styleCombine 的在线页面:打开查看下页面的源码,你会发现 JS、CSS 已经是被combo过的。 而若是你打开这个链接再看页面源码就会发现原来在开发状态下页面完全是模块化的,并且 AMD 模块的子模块也被合并进来了。

  部署成本:styleCombine 系统由三部分组成,需要相互配合方可正常工作。对 nginx 服务器、nodejs 比较熟悉的同学,整体的部署成本不会高,我们后期也会提供更加自动化的部署脚本来简化这一流程。在部署完毕的后续开发流程中,styleCombine 系统对开发者、应用架构是完全透明的,不增加后期成本。

  与浏览器端加载器的优劣比较:实际上两者不是对立的关系,而是相互的配合,服务端的加载器能够完成浏览器端加载器不能完成的一些功能,比如对

  的解析并一次性 combo,比如对 JS、CSS 文件内容变化自动更新时间戳的支持等。它更适用于大型网站对性能有着

  但并非有了服务端的加载器就不需要浏览器端的加载器,比如一些需要异步加载的模块,服务端是无法处理到 html 源码的,所以就需要浏览器端的加载器配合进行,seaJS、requireJS 也都实现了动态 combo 功能(但无法做到多层依赖的一次 combo )。

  系统目前更适用于多页面应用的场景,对单页应用,由于异步加载的模块较多,目前只能发挥出对页面初始加载时的优化功能。PS:对于这个问题@前端农民工提供了一种解决思,可以把文件依赖列表通过 apache/nginx 模块注入到页面上,这样单页应用也可以在异步加载时一次 combo 获取依赖文件。

  styleCombine 以创新性的思维实现了前端代码的服务器端加载,对开发者透明,对应用架构几乎无成本,而带来的是更彻底的模块化开发方式及应用性能的自动化保障!

  给InfoQ中文站或者参与内容翻译工作,请邮件至也欢迎大家通过新浪微博(@InfoQ)或者腾讯微博(@InfoQ)关注我们,并与我们的编辑和其他读者朋友交流。

  我们理解您使用ad blocker的初衷,但为了InfoQ能够继续以免费方式为您服务,我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单,感谢您的理解与支持。


相关评论