微信公众平台前端组件方案及其优化

微信公众平台前端组件方案及其优化 郭志伟(raphealguo) 微信平台开发组 2014.4.26

关于我 • 2013年毕业加入微信平台开发组 • 爱好读书，微博/豆瓣@raphealguo • 博客：http://rapheal.sinaapp.com/

组件

早期 • 简单

问题 • 乱 • 靠手工维护 == 没法维护 • 上线经常出问题，经常回退或者补上 • 出现过大量的htmldecode等函数的复制粘贴 • 页面上冗余大量无用的外链js • 新加进来的开发不敢乱删冗余的东西，一直在叠加

目标 • 修改哪个文件就上哪个文件 • 自动打包方案 • 减少手工维护

第一版 前端的依赖管理问题，用AMD/CMD • 优点：不用手工维护依赖关系，可以分模块上线 • 缺点：请求太多

第一版 组件 == JS + CSS +HTML 问题：require(a.html)跨域解决：伪装成js文件require("A.html.js");

第一版

第二版 • 静态打包：把页面依赖的全部组件C.js、A.js、B.js打包成page.js • 优点：请求少，提高加载速度 • 缺点：上线又不安全了

第三版 动态打包！搭建Combo服务，利用seajs-combo组件。请求为： http://res.wx.qq.com/page.js http://res.wx.qq.com/a.js,b.js http://res.wx.qq.com/c.js,d.js,e.js http://res.wx.qq.com/f.js 优点：上线不污染其他模块缺点：串行依赖，依赖树的层级决定了请求数

第四版 • 为了增加缓存率，我们文件加了版本号: http://res.wx.qq.com/page123cab445.js • seajs发送的请求不知道版本号 seajs.use('page.js') • 映射表！发送请求前查表 Module = {"page.js":"page123cab445.js"}

第五版 提前Combo • 动态打包，请求减少 • 可分模块上线

第六版 • 多个项目之间共享公共组件 • 独立SVN维护 • 构建前svn co到对应的模块目录

Wap上的方案 没压缩前 • seajs.js大小20K，919行 • wap_cmd.js大小2K，45行

工具自动化 • 减少手工维护，提高可靠性 • 降低开发量

组件编译过程 预编译：国际化/去注释编译：提取id/依赖…… 优化：压缩js，雪碧图合并（二倍图）…… 链接：HTML里提前Combo…… 后处理：拷贝到目标目录……

预编译—国际化 国内版跟海外版的不一致，解决方案：生成不同语言包的静态文件，独立部署，提高运行时性能。国际化： • _("你好") 或者 _('你好') • _("%s, 你好", "raphealguo") 国际化特有逻辑： {{ if ('zh_CN' == _('zh_CN')) }} /* 中文平台特有逻辑 */ {{ else }} /* 海外平台特有逻辑 */ {{ endif }}

开发上一些原则

Web • 工具方法诸如：htmlDecode等 • 多实例的类诸如：Checkbox等 • 构造函数参数是对象，组件的向前兼容非常容易解决 • 小组件组合成复杂的组件，没继承

Wap • 流量大的页面用原生JS实现 • 重要的资源内联（红色：外链，绿色：内联） • 利用PC端计算资源，减少wap端跟后台计算资源，例如图文消息的图片懒加载 • 在PC编辑保存时前端替换<img src>变成<img data-src> • wap页滚动到图片位置再把data-src的值填到src

部署 http://res.wx.qq.com/page12abc389.js • 上游对接CDN • 文件名后加版本号 • HTTP的max-age设置长一点，提高缓存率

灰度

回退

下一步？ • Combo请求太长？ • 本地缓存JS模块？ • 增量更新？

Q&A 公众平台：https://mp.weixin.qq.com/ 微博/豆瓣@raphealguo 邮箱：raphealguo@qq.com 博客：http://rapheal.sinaapp.com/

谢谢

微信公众平台前端组件方案及其优化

微信公众平台前端组件方案及其优化

Presentation Transcript