《微信公众平台前端组件方案及其优化郭志伟raphealguo.ppt》由会员分享，可在线阅读，更多相关《微信公众平台前端组件方案及其优化郭志伟raphealguo.ppt（27页珍藏版）》请在三一办公上搜索。
1、微信公众平台前端组件方案及其优化,郭志伟(raphealguo)微信平台开发组2014.4.26,关于我,2013年毕业加入微信平台开发组爱好读书，微博/豆瓣raphealguo博客：http:/,组件,早期,简单,问题,乱靠手工维护=没法维护上线经常出问题，经常回退或者补上出现过大量的htmldecode等函数的复制粘贴页面上冗余大量无用的外链js新加进来的开发不敢乱删冗余的东西，一直在叠加,目标,修改哪个文件就上哪个文件自动打包方案减少手工维护,第一版,前端的依赖管理问题，用AMD/CMD优点：不用手工维护依赖关系，可以分模块上线缺点：请求太多,组件=JS+CSS+HTML问题：requi
2、re(a.html)跨域解决：伪装成js文件require(A.html.js);,第一版,第一版,第二版,静态打包：把页面依赖的全部组件C.js、A.js、B.js打包成page.js优点：请求少，提高加载速度缺点：上线又不安全了,第三版,动态打包！搭建Combo服务，利用seajs-combo组件。请求为：http:/,第四版,为了增加缓存率，我们文件加了版本号:http:/=page.js:page123cab445.js,第五版,提前Combo动态打包，请求减少可分模块上线,第六版,多个项目之间共享公共组件独立SVN维护构建前svn co到对应的模块目录,Wap上的方案,没压缩前sea
3、js.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:/,灰度,回退,下一步？,Combo请求太长？本地缓存JS模块？增量更新？,Q&A,公众平台：https:/,谢谢,
