Upgrade to Pro — share decks privately, control downloads, hide ads and more …

kissy modularization part2

Avatar for yiminghe yiminghe
February 21, 2014
Technology
1.8k
1

kissy modularization part2

part2 of kissy modularization tutorials

Avatar for yiminghe

yiminghe

February 21, 2014

More Decks by yiminghe

See All by yiminghe
小程序终端技术架构
Avatar for yiminghe yiminghe
0
280
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
220
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
190
antd at qcon2016
Avatar for yiminghe yiminghe
1
250
react-based architecture
Avatar for yiminghe yiminghe
2
190
React Ecosystem At Ant Financial
Avatar for yiminghe yiminghe
4
2.3k
ant design preview
Avatar for yiminghe yiminghe
1
340
react best practice
Avatar for yiminghe yiminghe
3
230
react at alipay
Avatar for yiminghe yiminghe
43
4.5k

Other Decks in Technology

See All in Technology
いまさら聞けない「仕様駆動開発入門」 〜AI活用時代の開発プロセスを考える〜
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
230
そこにあるから地図ができる～位置を示す"モノ"を愉しむ～ - Interface 2026年6月号GPS特集オフ会 / interface_202606_GPS_offline
Avatar for sakaik sakaik
1
100
Lightning近況報告
Avatar for Koji NAKAMURA kozy4324
0
230
Zenoh on Zephyr on LiteX
Avatar for takasehideki takasehideki
2
120
AIAU_UMEMOGU_ninomiya_slide
Avatar for ninomiya ninomiya_ii
0
270
40代で“やっとエンジニアになれた”――閉じた学びを開き、空の青さを知る / 20260628 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
4
940
LayerX コーポレートエンジニアリング室におけるサプライチェーンセキュリティへの取り組み / Supply Chain Security at LayerX Corporate Engineering
Avatar for Yuya Takeyama yuyatakeyama
3
850
組織における AI-DLC 実践
Avatar for ASKUL Engineer askul
0
130
現場のトークンマネジメント
Avatar for dak2 dak2
1
190
Deep Data Security 機能解説
Avatar for oracle4engineer oracle4engineer
PRO
2
220
AI Agentをシステムに組み込む前にゆるく向き合ってみる
Avatar for hayama hayama17
0
160
徹底討論！ECS vs EKS！
Avatar for 高棹大樹 daitak
3
1.8k

Featured

See All Featured
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.6k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
140
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
260
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
240
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.6k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
280
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
2
13k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
620
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
200
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.7M
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
3.5k

Transcript

  1. KISSY Modularization part 2 - optimzation [email protected]

  2. 之前浏览器下的问题 • 首屏闪烁 • 链接数过多

  3. 链接数

  4. 使用工具进行优化 • grunt-kmc • 合并文件 • 动态 combo

  5. • 合并项目文件

  6. 合并文件 • 适合具备明确的入口文件 • Gruntfile.js

  7. modules.js • 描述项目合并后文件外部依赖

  8. index.js • 入口模块以及其依赖的本地模块

  9. 应用 • 引入 seed.js modules.js • 配置 combine true •

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

  10. • 动态 combo

  11. 动态 combo • 适合多入口或无入口应用或需要后期动态加载 • Gruntfile.js

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

  13. 应用 • 引入 seed.js modules.js • 配置 combine true •

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

  14. • 首屏闪烁

  15. 加载 css • 异步加载 css 造成闪烁

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

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

  17. 大规模应用优化 • Gallery/mini 模块？ • 打包进项目入口文件 • 动态 combo •

    合并 gallery/mini 模块的 modules.js 到项目 modules.js