kissy modularization part2

550 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
550
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

kissy modularization part2

  1. 1. KISSY Modularization part 2 - optimzation yiminghe@gmail.com
  2. 2. 之前浏览器下的问题 • 首屏闪烁 • 链接数过多
  3. 3. 链接数
  4. 4. 使用工具进行优化 • grunt-kmc • 合并文件 • 动态 combo
  5. 5. • 合并项目文件
  6. 6. 合并文件 • 适合具备明确的入口文件 • Gruntfile.js
  7. 7. modules.js • 描述项目合并后文件外部依赖
  8. 8. index.js • 入口模块以及其依赖的本地模块
  9. 9. 应用 • 引入 seed.js modules.js • 配置 combine true • http://localhost:8111/?concat=1
  10. 10. • 动态 combo
  11. 11. 动态 combo • 适合多入口或无入口应用或需要后期动态加载 • Gruntfile.js
  12. 12. Module.js • 包含项目所有的模块的内部依赖与外部依赖
  13. 13. 应用 • 引入 seed.js modules.js • 配置 combine true • http://localhost:8111/?combo=1
  14. 14. • 首屏闪烁
  15. 15. 加载 css • 异步加载 css 造成闪烁
  16. 16. 加载 css • 使用 importStyle 配置 modules.js 同步 combo 加载 css • 对首屏用到的所有模块调用 importStyle
  17. 17. 大规模应用优化 • Gallery/mini 模块? • 打包进项目入口文件 • 动态 combo • 合并 gallery/mini 模块的 modules.js 到项目 modules.js

×