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

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
220
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
180
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
150
antd at qcon2016
Avatar for yiminghe yiminghe
1
210
react-based architecture
Avatar for yiminghe yiminghe
2
160
React Ecosystem At Ant Financial
Avatar for yiminghe yiminghe
4
2.2k
ant design preview
Avatar for yiminghe yiminghe
1
280
react best practice
Avatar for yiminghe yiminghe
3
200
react at alipay
Avatar for yiminghe yiminghe
43
4.3k

Other Decks in Technology

See All in Technology
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
Avatar for Shun Yoshie syoshie
5
670
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
Avatar for NTT docomo Business nttcom
1
210
alecthomas/kong はいいぞ
Avatar for FUJIWARA Shunichiro fujiwara3
6
990
claude codeでPrompt Engineering
Avatar for いおりん iori0311
0
520
ファインディにおける Dataform ブランチ戦略
Avatar for Noriaki Hiraki hiracky16
0
200
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
Avatar for SansanTech sansantech
PRO
1
320
SAE J1939シミュレーション環境構築
Avatar for okzkey daikiokazaki
1
190
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
Avatar for Auctria auctria
PRO
0
180
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
Avatar for Cygames cygames
PRO
1
170
AIエージェントを支える設計
Avatar for takuya kikuchi tkikuchi1002
11
2.1k
Expertise as a Service via MCP
Avatar for Yoda Keisuke yodakeisuke
1
160
完璧を目指さない小さく始める信頼性向上
Avatar for KAKEHASHI kakehashi
PRO
0
110

Featured

See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.4k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
189
11k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k

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