KISSY Modularizationpart 2 - optimzation

yiminghe@gmail.com

之前浏览器下的问题

• 首屏闪烁

• 链接数过多

链接数

使用工具进行优化

• grunt-kmc

• 合并文件

• 动态 combo

• 合并项目文件

合并文件

• 适合具备明确的入口文件

• Gruntfile.js

modules.js

• 描述项目合并后文件外部依赖

index.js

• 入口模块以及其依赖的本地模块

应用

• 引入 seed.js modules.js

• 配置 combine true

• http://localhost:8111/?concat=1

• 动态 combo

动态 combo

• 适合多入口或无入口应用或需要后期动态加载

• Gruntfile.js

Module.js

• 包含项目所有的模块的内部依赖与外部依赖

应用

• 引入 seed.js modules.js

• 配置 combine true

• http://localhost:8111/?combo=1

• 首屏闪烁

加载 css

• 异步加载 css 造成闪烁

加载 css

• 使用 importStyle 配置 modules.js 同步 combo 加载 css

• 对首屏用到的所有模块调用 importStyle

大规模应用优化

• Gallery/mini 模块？

• 打包进项目入口文件

• 动态 combo• 合并 gallery/mini 模块的 modules.js 到项目 modules.js