Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

kissy modularization part2

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

kissy modularization part2

part2 of kissy modularization tutorials

Avatar for yiminghe

yiminghe

February 21, 2014
Tweet

More Decks by yiminghe

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

Other Decks in Technology

See All in Technology
さくらのクラウド開発ふりかえり2025
Avatar for kazeburo kazeburo
2
980
Connection-based OAuthから学ぶOAuth for AI Agents
Avatar for GMO Flatt Security flatt_security
0
350
ハッカソンから社内プロダクトへ AIエージェント ko☆shi 開発で学んだ4つの重要要素
Avatar for Tech Leverages leveragestech
0
110
20251218_AIを活用した開発生産性向上の全社的な取り組みの進め方について / How to proceed with company-wide initiatives to improve development productivity using AI
Avatar for yayoi_dd yayoi_dd
0
650
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
9.9k
【開発を止めるな】機能追加と並行して進めるアーキテクチャ改善/Keep Shipping: Architecture Improvements Without Pausing Dev
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
120
AgentCore BrowserとClaude Codeスキルを活用した 『初手AI』を実現する業務自動化AIエージェント基盤
Avatar for Hirokatsu Endo ruzia
7
1.4k
アプリにAIを正しく組み込むための アーキテクチャ── 国産LLMの現実と実践
Avatar for Yasushi Taki kohju
0
210
[Neurogica] 採用ポジション/ Recruitment Position
Avatar for Neurogica neurogica
1
110
20251222_サンフランシスコサバイバル術
Avatar for ponponmikan ponponmikankan
2
140
株式会社ビザスク_AI__Engineering_Summit_Tokyo_2025_登壇資料.pdf
Avatar for VISASQ eikohashiba
1
110
まだ間に合う！ Agentic AI on AWSの現在地をやさしく一挙おさらい
Avatar for みのるん minorun365
17
2.6k

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
400
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.3k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
560
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
190
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
30k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
150

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