前端资源动态渲染模式介绍之seed篇

前面两篇文章(前端资源动态渲染模式介绍之概览篇前端资源动态渲染模式介绍之combo篇)介绍了combo模式,今天重点介绍下seed模式,seed模式是一种利用js动态解析页面模块依赖,而且结合localstorage和combo 服务,实现的一种速度更快的加载方式。

seed模式特点

  • 结合打包工具,实现页面依赖管理,seedjs不需要维护整站(整个项目)的resourcemap,combo需要使用后台语言维护map.json
  • 结合localstorage,将模块缓存到ls,方便全站(单域名)下公用,下载过模块避免二次请求
  • 对于更新的,没有下载过的模块,拼成combo url,一次加载,避免多次请求

如何实现seed模式

要实现seed模式,要修改模块定义和引入函数,例如AMD中的definerequire,结合打包工具,实现静态资源依赖表resourcemap(例如fis中的map.json)的字段自定义

define函数进行改造

首先对define函数进行改造,增加参数传入md5:define(id, factory, md5) ,使其将factory源码和版本号存入localstorage,文件的md5值,可以结合打包工具实现,fis中的file对象有个方法是file.getHash() 可以获取md5值,这个值还需要存入resourcemap,用于比较缓存中的version和下发的resourcemap是否一致,如果不一致则需要重新拉最新版本。

localstorage中缓存的内容是factory的源码,加上version(hash):

//代码示例如下
//找到resourcemap中的id
var map = resouceMap[id];
//拼缓存的数据
var content = {
    version: map.hash,
    //code是factory的内容
    code: factory.toString()
}
localStorage[id] = JSON.stringify(content)

resourcemap的改造

这个很简单,增加个字段:hash

字段
id 唯一id
uri 线上cdn完整url
hash 文件md5
deps 依赖的模块

对文件进行改造

为了防止每个页面都是用全局的resourcemap(fis的map.json),对于单个页面文件需要输出自己的依赖关系表resourcemap,减少页面的大小,这部分工作也是通过打包工具实现的。

打包工具将每个页面的依赖关系遍历出来,然后输出到每个页面,例如fis3的做法是:http://fis.baidu.com/fis3/docs/lv3.html#%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E6%98%A0%E5%B0%84%E8%A1%A8

require函数的改造

require函数是获取模块依赖关系,没有的则加载模块,优先加载依赖的模块,等依赖模块加载完毕后,再遍历向上加载,保证模块代码执行的时候,该模块依赖的模块都已经加载完毕。

前端资源动态渲染模式介绍之combo篇

今天继续介绍前端资源动态渲染模式中的combo模式,combo模式是利用静态服务器的combo服务,结合静态分析页面使用的js或者css文件,然后动态输出combo url地址的方式。

静态资源combo服务

公司静态集群使用的是nginx服务,nginx有个concat模块可以将url进行打包。使用它之后,需要合并输出的静态资源需要在??两个问号后面加,逗号隔开,例如:

http://baidu.com??style1.css,style2.css
http://box.bdimg.com/life/js??script1.js,script2.js

当然这种合并的文件数也是有限的,如果超过默认或者设置的最大文件数,服务就会报错,可以通过修改nginx.conf的配置进行修改:

location /static/ {
    concat on;
    concat_max_files 20;
}

combo渲染模式

前文介绍过基本原理,现在就拿smarty模板的{%require name="life:js/demo"%}说下具体的代码实现步骤,其他语言参考即可,我们还有个node版本的,node我们采用了yog2框架,其实是一样的,如果是直接php,其实就是个引入的函数而已(从第二步开始)

  1. 执行{%require name="life:js/demo"%},进入smarty的扩展语法require标签的实现
  2. 实际执行的是 Resource.class的load函数:Resource::load('life:js/demo')
  3. load函数根据传入的id(life:js/demo),读取life-map.json(fis生成的静态资源表),根据id找到类似下面的内容:
    "life:js/demo":{
    "uri":"http://s.box.bdimg.com/lf/js/demo_defb566.js",
    "type":"js",
    "deps":["common:bdbox/template"],
    "rUri":"/static/lf/js/demo_defb566.js",
    "hash": "defb566"
    }
    

前端资源动态渲染模式介绍之概览篇

在手百我们使用了一种动态管理静态资源的方式,在开发中通常打包工具在打包构建的时候根据页面依赖将所有的js或者css打成一个app.js或者app.css,这样的打包方式我们称之为「静态打包」,因为只能在项目发布构建的过程中一次性将页面用到的js或者css打包成一个文件,上完线之后就不能在拆分。

这种「静态打包」的方式有个弊端:如果在多个view的页面,是不能够充分利用不同页面之间的公用代码(模块)。于是加强版就是在线统计一个网站(项目)模块依赖和公用的代码,然后设置一个阈值,利用统计的数据,分析出多个页面高频使用的公共代码,再下次上线的时候,将这部分代码打包在一起。这种方式百度内部也有类似的解决方案,但是这种方案也没有充分发挥出细粒度模块的作用,而且实现相对来说比较麻烦,需要长期数据统计支持。

今天我介绍下手百中我们实现的一种动态管理静态资源的方式,我将它称之为「前端资源动态渲染模式」,简称「渲染模式」。这种方式是基于手百现有业务出发的,解决了手百不同平台(安卓、ios、winphone)的代码差异,而且充分利用缓存、combo服务,做到可配方便调试的目的。

前端资源动态渲染模式特点

代码永远只写一份,不需要编写特殊逻辑

我们实现的渲染模式,对于代码开发者来说,不需要做特殊的逻辑编写,只需要按照正常编码要求来写代码,剩下的就交给打包工具和上线流程,对于初学者不需要任何的学习门槛,而且支持本地静态资源和外部静态资源混用。

能够根据不同平台,不同后端业务逻辑,动态打包不同代码

后端业务逻辑不通,则需要的js或者css文件不通,之前的做法是一个js里面包含了所有的代码逻辑,现在只需要如下代码:

{% if($isiOS) %}
    {%require name="life:ios/invoke.js"%}
{%else%}
    {%require name="life:android/invoke.js"%}
{% endif%}

这个是动态逻辑解析后的执行,所以编译阶段的静态打包是完全解决不了这个问题的。

结合combo服务或者localstorage做缓存优化

利用静态资源的combo服务和浏览器的localstorage存储,我们可以把渲染模式进一步优化,最简单的方式是combo渲染模式,动态分析完页面依赖之后,将url拼接成combo url一次输出