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.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
300
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
240
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
350
react best practice
Avatar for yiminghe yiminghe
3
240
react at alipay
Avatar for yiminghe yiminghe
43
4.6k

Other Decks in Technology

See All in Technology
2026-09-04 SRE Tech Talk #15 怠惰なTerraform / Lazy Terraform
Avatar for SUZUKI Masashi masasuzu
0
170
Bet AI Day 2026丨AIによって本質に戻るシステムリスク管理
Avatar for LayerX layerx
PRO
0
790
プロダクトエンジニアに必要な「いい感じ」に作る能力 〜たくさん作れる時代に、どこまで作るかの決め方〜
Avatar for Jotaro Nishime jnishime_dresscode
2
1.2k
DINO-EdgeQuery:Edge-First Polygon Decoding for Building Footprint Extraction from Satellite Imagery
Avatar for Yuji Kobayashi lehupa
0
140
なぜSRE・セキュリティは評価されないのか？守りの組織を事業成長エンジンに変えた実践
Avatar for サイバーセキュリティクラウド cscengineer
PRO
2
2.1k
AI-DLCって実際どう？ 〜聞きたいこと全部聞いてみる〜
Avatar for 荒木 ARK news_it_enj
0
220
Claude Codeの体系的な理解と知識のフック
Avatar for Oikon oikon48
10
6.6k
PfEingのアプローチで働こう
Avatar for rin（林晃 / Akira Hayashi） rindrics
0
160
Guerilla InnerSource in enterprises, during the AI hype
Avatar for Oleg Nenashev onenashev
PRO
0
150
データエンジニアリングワークショップ：Auto LoaderとSparkで学ぶデータパイプライン構築
Avatar for Databricks Japan databricksjapan
PRO
0
140
#jawssonic2026 あの時代が悪かった ~動かなかったSageMakerと共に迎えたイベント当日~
Avatar for Kana Kitagawa ktkn1129
0
130
Azure App Service / Container Apps の組み込み認証
Avatar for Kuniteru Asami kuniteru
0
190

Featured

See All Featured
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
340
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.2k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
330
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.9k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
320
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
230
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
280
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
440
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
550
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
290

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