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

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
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
230
react at alipay
Avatar for yiminghe yiminghe
43
4.6k

Other Decks in Technology

See All in Technology
Claude Codeで開発以外の業務も爆速化しよう！
Avatar for みのるん minorun365
PRO
12
9.4k
ブラウザで変わるID連携（OAuth/OIDC Numa (Immersion) Workshop 2026）
Avatar for OpenID Foundation Japan oidfj
PRO
0
430
『自分で判断できるか』を基準に、プロダクトのハンズオン研修でAI利用の線を引いてみた / Where We Drew the Line on AI in Hands-on Training
Avatar for yuki honyanya
1
640
Sony-DroidKaigi2026
Avatar for ソニー株式会社 sony
0
170
EMの役割で 変わったこと・変わらなかったこと
Avatar for SansanTech sansantech
PRO
1
220
人気商品が「ちゃんと買える」をつくる ー ECの負荷改善
Avatar for ykagano ykagano
1
170
アクセスキー流出時の対応で再認識した攻撃側と防御側の非対称性について
Avatar for kazzpapa3 kazzpapa3
1
490
現場の暗黙知を継承するAIエージェント — 対話から生まれる長期記憶と Skills
Avatar for Atsuki Shirasawa atsukish
0
200
Kiro５兄弟のいまどきのセキュリティ基礎知識
Avatar for Hiroo Katoh kentapapa
0
450
マイナンバーカード本人確認の実装比較（OAuth/OIDC Numa (Immersion) Workshop 2026） / 20260825 numa-12
Avatar for OpenID Foundation Japan oidfj
PRO
0
420
研究開発部の紹介 / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
25k
AI駆動開発を組織で促すために
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
7
9.1k

Featured

See All Featured
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
220
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
430
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
370
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
490
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
340
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
880
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
410

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