使用 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 预览