how to reduce connections with kissy
Post on 12-Sep-2014
1.100 Views
Preview:
DESCRIPTION
TRANSCRIPT
使用 KISSY 减少 HTTP 链接数
承玉 (yiminghe@gmail.com)
KISSY BASED APPLICATION
使用场景
问题
KISSY 1.2 解决方案
KISSY 下一步
使用场景
应用代码基于 KISSY 1.2 模块化机制
使用场景
应用模块中使用或依赖了 KISSY 自身模块
开始使用
So easy !
建立测试
出现问题
链接数 Float 首屏
弹窗点击后懒加载
KISSY 1.2 解决方案
使用 KISSY Module Compiler 合并应用代码
使用 map 配置合并多个 KISSY 自身模块
使用 KISSY Module Compiler 合并应用代码
KISSY MODULE COMPILER
是一个模块代码依赖自动合并工具
是一个模块代码规范辅助工具, 可以辅助规范模块编写, 不仅仅只适用动态加载场景, 也可以用来提高开发阶段效率.
是一个模块代码部署工具. 结合KISSY 1.2 Loader , 用于模块代码部署阶段, 多个模块根据其依赖合并为一个文件, 减少 HTTP 链接数.
构建脚本编写
压缩后
main-min.js
效果
TOO MANY CONNECTIONS ABOUT KISSY
KISSY 本身模块链接数过多 ?
使用 map 配置合并多个 KISSY 自身模块
配置 MAP
Combo kissy 自身模块
最终效果
首屏
最终效果
懒加载 overlay 后
KISSY 1.3 下一步
自动 combo
效果
自动 COMBO
注意：
1. 适合模块不多的中小型应用
2. 需要事先指定依赖
TODO: module compiler 从模块定义中自动抽取依赖元信息
3. 模块过多 combo url 会自动拆分，链接数增多
4. 可以和 module compiler 混合使用
部分自动 combo + 部分手动打包
ANY SUGGESTION?
yiminghe@gmail.com
下节预告
KISSY Promise API 预览
top related