[关闭]
@jameszuo 2015-05-21T01:44:40.000000Z 字数 702 阅读 354

公共组件独立方案

技术需求


解决方案 1:

提取公共组件到 SVN 独立目录中,各业务在配置文件中指定公共组件版本,通过本地命令行打包。
缺点是用户端访问不同业务需要重复下载公共组件代码


解决方案 2:

提取公共组件带版本号部署 CDN,客户端利用 CDN 请求合并能力批量下载组件,缓存在 localStorage 中,下次访问时过滤掉本地已经缓存的组件

需要通过工具将组件的路径 扁平化 + 缩短,以防止因 URL 过长导致请求失败(已知 imgcache 支持的 URL 长度为 1024 个字符,文件字节数约为5.1MB

如业务依赖这几个库:

/business/constants-1.0.js
/util/cookie-1.1.js
/widget/login-1.3.1.js

通过工具构建后生成的URL:

http://i.gtimg.cn/c/=/club/gamecenter/WebApi/league/dest/js/a1.0.js,b1.1.js,c1.3.1.js

原先长度为 2988 字符的 URL 可以缩短到 500 个字符左右

缺点是这个合并请求的 JS 文件会比较大


流程

Created with Raphaël 2.1.2公共库(源码)公共库(源码)CDNCDN修改源码修改版本号构建发布
Created with Raphaël 2.1.2webviewwebview本地缓存本地缓存公共库(CDN)公共库(CDN)CGICGI启动解析内联CSS【分析本地JS模块缓存】【载入已缓存的模块】【[可选]拉取有更新的模块】【新模块】【载入新模块】【新模块写入缓存】【[延时]移除旧缓存】载入业务内联JS模块拉取数据{ ... }初始化和渲染
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注