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
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
260
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
200
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
180
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
「活動」は激変する。「ベース」は変わらない ～ 4つの軸で捉える_AI時代ソフトウェア開発マネジメント
Avatar for 辻裕士/sentokun sentokun
0
100
スピンアウト講座06_認証系（API-OAuth-MCP）入門
Avatar for overflow ,Inc overflowinc
0
1.2k
CloudFrontのHost Header転送設定でパケットの中身はどう変わるのか？
Avatar for nagisa_53 nagisa53
1
190
OpenClawでPM業務を自動化
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
1
180
ADK + Gemini Enterprise で 外部 API 連携エージェント作るなら OAuth の仕組みを理解しておこう
Avatar for Kaz kaz1437
0
210
開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-
Avatar for SmartHR 品質保証本部 qa
0
340
Phase07_実務適用
Avatar for overflow ,Inc overflowinc
0
2k
Navigation APIと見るSvelteKitのWeb標準志向
Avatar for Okuto Oyama yamanoku
2
110
夢の無限スパゲッティ製造機 #phperkaigi
Avatar for hideki kinjyo o0h
PRO
0
370
Sansanの認証基盤を支えるアーキテクチャとその振り返り
Avatar for SansanTech sansantech
PRO
1
100
The Rise of Browser Automation: AI-Powered Web Interaction in 2026
Avatar for Marc Thompson marcthompson_seo
0
310
20260323_データ分析基盤でGeminiを使う話
Avatar for yuichi 1210yuichi0
0
180

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
160
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
120
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
330
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
260
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
140

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