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

kissy modularization part2

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for yiminghe yiminghe
February 21, 2014
Technology
1.7k
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
210
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
190
antd at qcon2016
Avatar for yiminghe yiminghe
1
240
react-based architecture
Avatar for yiminghe yiminghe
2
180
React Ecosystem At Ant Financial
Avatar for yiminghe yiminghe
4
2.3k
ant design preview
Avatar for yiminghe yiminghe
1
330
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
Strands Agents超入門
Avatar for KintoTech_Dev kintotechdev
1
160
生成 AI × MCP で切り拓く次世代 SRE！自律型運用への挑戦と開発者体験の進化
Avatar for _awache _awache
0
140
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.8k
最低限これだけ押さえれ大丈夫_Claude Enterprise/Team企業展開ガバナンス入門
Avatar for t-kikuchi tkikuchi
1
770
インフラが苦手でも大丈夫！ 紙芝居 Kubernetes -WWGT 10周年編-
Avatar for Aoi Takahashi aoi1
1
350
正解のないAIプロダクトをどう導くか？dodaが挑む、ユーザーの『本音』を構造化する評価設計と検証のリアル
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
180
BigQuery の Cross-cloud Lakehouse への歩み
Avatar for Tomonori Hayashi / ぴーはや phaya72
2
550
運用を見据えたAIエージェント設計実践
Avatar for amacbee amacbee
1
2.7k
新アーキテクチャ「TiDB X」解説とDedicated比較 TiDB Cloud Premiumのゲーム運用活用を検証
Avatar for altplus Inc. staffrecruiter
0
110
ChatworkとBPaaS 異なる特性で学んだAI機能開発の ベストプラクティス
Avatar for kubell kubell_hr
2
2.6k
もりもり新機能を一挙紹介！ AgentCoreに入門して、AWS上にAIエージェントを構築しよう
Avatar for みのるん minorun365
PRO
6
750
Unlocking the Apps
Avatar for Tim Perry pimterry
0
210

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.7k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
580
It's Worth the Effort
Avatar for 3n 3n
188
29k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.2k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
140
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
360

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