微信公众平台前端组件方案及其优化@郭志伟(raphealguo)..ppt

关于我 2013年毕业加入微信平台开发组 爱好读书，微博/豆瓣@raphealguo 博客：/ 组件 早期 问题 乱 靠手工维护 == 没法维护 上线经常出问题，经常回退或者补上 出现过大量的htmldecode等函数的复制粘贴 页面上冗余大量无用的外链js 新加进来的开发不敢乱删冗余的东西，一直在叠加 目标 修改哪个文件就上哪个文件 自动打包方案 减少手工维护 第一版 前端的依赖管理问题，用AMD/CMD 优点：不用手工维护依赖关系，可以分模块上线 缺点：请求太多 第一版 第一版 第二版 静态打包：把页面依赖的全部组件C.js、A.js、B.js打包成page.js 优点：请求少，提高加载速度 缺点：上线又不安全了 第三版 动态打包！ 搭建Combo服务，利用seajs-combo组件。 请求为： /page.js /a.js,b.js /c.js,d.js,e.js /f.js 优点：上线不污染其他模块 缺点：串行依赖，依赖树的层级决定了请求数 第四版 为了增加缓存率，我们文件加了版本号: /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行 工具自动化 减少手工维护，提高可靠性 降低开发量 组件编译过程 预编译—国际化 国内版跟海外版的不一致，解决方案：生成不同语言包的静态文件，独立部署，提高运行时性能。 国际化： _(你好) 或者 _(你好) _(%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 部署 /page12abc389.js 上游对接CDN 文件名后加版本号 HTTP的max-age设置长一点，提高缓存率 灰度 回退 下一步？ Combo请求太长？ 本地缓存JS模块？ 增量更新？ QA 公众平台：/ 微博/豆瓣@raphealguo 邮箱：raphealguo@ 博客：/ 谢谢 微信公众平台 */27 微信公众平台 */27 微信公众平台 */27 微信公众平台前端组件方案及其优化 郭志伟(raphealguo) 微信平台开发组 2014.4.26 简单 组件 == JS + CSS +HTML 问题：require(a.html)跨域 解决：伪装成js文件require(A.html.js); 预编译：国际化/去注释 编译：提取id/依赖…… 优化：压缩js，雪碧图合并（二倍图）…… 链接：HTML里提前Combo…… 后处理：拷贝到目标目录…… 微信公众平台 */27 微信公众平台 */27 微信公众平台 */27 * *