AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

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

发布者 FEer   简介 前端技术
发布于 1429178738574  浏览 6612 关键词 前端, JavaScript 
分享到

第1页

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

第2页

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

第3页

组件

第4页

早期
简单

第5页

问题

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

第6页

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

第7页

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

第8页

组件 == JS + CSS +HTML

问题:require(a.html)跨域
解决:伪装成js文件require("A.html.js");
第一版

第9页

第一版

第10页

第二版
静态打包:把页面依赖的全部组件C.js、A.js、B.js打包成page.js


优点:请求少,提高加载速度
缺点:上线又不安全了

第11页

第三版
动态打包!
搭建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

优点:上线不污染其他模块
缺点:串行依赖,依赖树的层级决定了请求数

第12页

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

第13页

第五版
提前Combo


动态打包,请求减少
可分模块上线

第14页

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

第15页

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

第16页

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

第17页

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

第18页

预编译—国际化
国内版跟海外版的不一致,解决方案:生成不同语言包的静态文件,独立部署,提高运行时性能。

国际化:
_("你好") 或者 _('你好')
_("%s, 你好", "raphealguo")

国际化特有逻辑:
{{ if ('zh_CN' == _('zh_CN')) }}
/* 中文平台特有逻辑 */
{{ else }}
/* 海外平台特有逻辑 */
{{ endif }}


第19页

开发上一些原则

第20页

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




第21页

Wap
流量大的页面用原生JS实现
重要的资源内联(红色:外链,绿色:内联)


利用PC端计算资源,减少wap端跟后台计算资源,例如图文消息的图片懒加载
在PC编辑保存时前端替换变成
wap页滚动到图片位置再把data-src的值填到src

第22页

部署
http://res.wx.qq.com/page12abc389.js

上游对接CDN
文件名后加版本号
HTTP的max-age设置长一点,提高缓存率

第23页

灰度

第24页

回退

第25页

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

第26页

Q&A
公众平台:https://mp.weixin.qq.com/

微博/豆瓣@raphealguo
邮箱:raphealguo@qq.com
博客:http://rapheal.sinaapp.com/

第27页

谢谢
支持文件格式:*.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。