Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
330
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
260
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
190
antd at qcon2016
Avatar for yiminghe yiminghe
1
260
react-based architecture
Avatar for yiminghe yiminghe
2
200
React Ecosystem At Ant Financial
Avatar for yiminghe yiminghe
4
2.3k
ant design preview
Avatar for yiminghe yiminghe
1
360
react best practice
Avatar for yiminghe yiminghe
3
250
react at alipay
Avatar for yiminghe yiminghe
43
4.6k

Other Decks in Technology

See All in Technology
hackers_champloo_2026_tidb
Avatar for makocchi makocchi
0
170
実践！Cloud Run ハンズオン！！ / Cloud Run handson
Avatar for y-ohgi y0hgi
2
280
Metadata - Section 1: HTML Basics
Avatar for mohab soliman mohab1
0
120
⾮構造化データを価値に変える AI エージェント基盤とその組織
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
0
190
エンタメ企業のM&Aを支えるデータ基盤 ― 統合から店舗のリアルタイム分析まで / Data Engineering Summit 2026
Avatar for GENDA genda
0
190
DWH の限界突破！ AI エージェント向け爆速リアルタイムデータ基盤 ClickHouse
Avatar for jozono jozono
1
480
しろおびから始める！ログ活用の第一歩
Avatar for Shumei Ito shumei_ito
0
950
Tofu-Controller lightning talk @ Containerday 2026
Avatar for Giovanni Toraldo gionn
0
120
Classmethod Company Deck
Avatar for Satoshi7 satoshi7
1
710
AI導入は済んだ。次は統制を作り替える番だ_AI×開発組織 Summit 2026
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
300
Webの常識が通じないHTMLメールのダークモード
Avatar for teamLab teamlab
PRO
0
130
QA4AI 2026-Oct 生成AI時代の品質保証
Avatar for Takahiro Toku tokuty
1
880

Featured

See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
2
35k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
850
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
5.4M
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.8k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.3k
A Soul's Torment
Avatar for Nat Ma seathinner
8
3.8k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
43k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
371
20k

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