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
230
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
190
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
160
antd at qcon2016
Avatar for yiminghe yiminghe
1
220
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
290
react best practice
Avatar for yiminghe yiminghe
3
210
react at alipay
Avatar for yiminghe yiminghe
43
4.4k

Other Decks in Technology

See All in Technology
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
Avatar for Yuji Oshima yuj1osm
0
220
IBC 2025 動画技術関連レポート / IBC 2025 Report
Avatar for CyberAgent cyberagentdevelopers
PRO
2
210
OSSで50の競合と戦うためにやったこと
Avatar for yamadashy / やまだし yamadashy
3
1k
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
Avatar for Akira Shimosako simosako
2
370
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
Avatar for Bo-Yi Wu appleboy
0
270
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
Avatar for sayn0 sayn0
1
330
仕様駆動開発を実現する上流工程におけるAIエージェント活用
Avatar for sergicalsix sergicalsix
1
410
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
Avatar for Jumpei Sakatsu saka2jp
0
110
Retrospectiveを振り返ろう
Avatar for なかしょ nakasho
0
130
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
Avatar for Claire Giordano clairegiordano
0
150
AI連携の新常識！ 話題のMCPをはじめて学ぶ！
Avatar for MakoAkiba makoakiba
0
130
QA業務を変える（！？）AIを併用した不具合分析の実践
Avatar for ma2ri__ ma2ri
0
160

Featured

See All Featured
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.6k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.9k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
640
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
130k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
7k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.2k

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