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

郭志伟(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编辑保存时前端替换变成
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/

谢谢