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
350
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
280
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
200
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
Kiro 入門 (1 つのエージェントを、どの画面からでも) | 目指せ Kiro マスター 01
Avatar for Riku INADA inariku
PRO
6
1.3k
Kiro Crew 入門 (手を離しても進む仕事) | 目指せ Kiro マスター 11
Avatar for Riku INADA inariku
PRO
4
650
コードレビューをなくして見えたもの
Avatar for henteko henteko
0
140
属人化したISMS運用をGitHubとAIで仕組み化した1年間の記録
Avatar for Shohei Koyama / Sion sioncojp
4
1.8k
AI時代の組織作り：チーム開発から「個人×AI」への移行と、持続可能な「開発資本」の築き方
Avatar for ham ham0215
2
420
AWS基盤改善を支える 私たちの理念と行動指針
Avatar for Kento Suzuki kentosuzuki
0
140
Gifu WordPress Meetup #200 に向けて、私たちには何ができるだろうか？/ 2026-11-07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
240
JAWSコミュニティに 参加して1年経った結果
Avatar for ssakita ssakita
0
120
Active Directory と Entra ID のむむむな関係
Avatar for Murachi Akira murachiakira
PRO
4
1.7k
お客様の「やりたい」の先を見通す合意形成プロセス　～裏にある課題と不安を解きほぐすコツ～
Avatar for Yuka Koseki yukakoseki
0
130
HQ駆動開発で最高のAI-Contextを作ろう
Avatar for SansanTech sansantech
PRO
1
120
Context Ontology Accelerator 入門 (業務データの意味を、AI エージェントに渡す)
Avatar for Riku INADA inariku
PRO
3
590

Featured

See All Featured
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.9k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
2
390
New Earth Scene 8
Avatar for Sydney Stone popppiees
4
2.8k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
270
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
10
1.3k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
740
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
371
20k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
1k
Done Done
Avatar for chrislema chrislema
187
17k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
630
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k

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