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
290
支付宝小程序的开放架构
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.6k

Other Decks in Technology

See All in Technology
AI時代の開発生産性は、個人技からチーム設計へ
Avatar for Atsushi Nakatsugawa moongift
PRO
4
2.4k
AI時代のYAGNI：「爆速で無駄になった機能」からの学び / 20260720 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
450
SRE本の知られざる名シーン / The Hidden Gems of Google SRE Book
Avatar for Narimichi Takamura nari_ex
2
440
タスクの複雑さでモデルを選ぶ ── Thompson Samplingで動かす“トークン/コスト最適化
Avatar for satoh-y-0323 satohy0323
0
600
Kaggleで成長するために意識したこと
Avatar for Chikuwabu prgckwb
2
430
Type-safe IaC for Dart
Avatar for Nozomi Koborinai coborinai
0
170
「顧客の声を聞かなければ何も始まらない」 ── 顧客の声から生まれた『AI返信補助機能』の開発プロセス / AICon2026_shikata_imai
Avatar for Rakus_Dev rakus_dev
0
230
Data + AI Summit 2026 イベントレポート： 「AIがビジネスで意思決定するデータ基盤」へ
Avatar for KJ(Kenji Matsuda) nek0128
0
300
どこまでAIに任せるか 〜確率論と決定論の境界決定〜
Avatar for Shu Kobuchi shukob
0
170
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
8.4k
「守りたい体験」を渡すだけで E2E を生成させられるようになった話
Avatar for May hinac0
2
910
発表と総括 / Presentations and Summary
Avatar for Kenji Saito ks91
PRO
0
160

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
350
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.8k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
410
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
57k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.1k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
240
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
190
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
650

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