Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
kissy modularization part2
Search
yiminghe
February 21, 2014
Technology
1
1.7k
kissy modularization part2
part2 of kissy modularization tutorials
yiminghe
February 21, 2014
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
230
支付宝小程序的开放架构
yiminghe
0
190
gitc2016 react based architecture
yiminghe
1
160
antd at qcon2016
yiminghe
1
220
react-based architecture
yiminghe
2
160
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
290
react best practice
yiminghe
3
210
react at alipay
yiminghe
43
4.4k
Other Decks in Technology
See All in Technology
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
yuj1osm
0
220
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
210
OSSで50の競合と戦うためにやったこと
yamadashy
3
1k
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
simosako
2
370
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
270
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
330
仕様駆動開発を実現する上流工程におけるAIエージェント活用
sergicalsix
1
410
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
110
Retrospectiveを振り返ろう
nakasho
0
130
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
150
AI連携の新常識! 話題のMCPをはじめて学ぶ!
makoakiba
0
130
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
160
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Designing for Performance
lara
610
69k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
How to Ace a Technical Interview
jacobian
280
24k
Designing for humans not robots
tammielis
254
26k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Rails Girls Zürich Keynote
gr2m
95
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
The Pragmatic Product Professional
lauravandoore
36
7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Transcript
KISSY Modularization part 2 - optimzation
[email protected]
之前浏览器下的问题 • 首屏闪烁 • 链接数过多
链接数
使用工具进行优化 • grunt-kmc • 合并文件 • 动态 combo
• 合并项目文件
合并文件 • 适合具备明确的入口文件 • Gruntfile.js
modules.js • 描述项目合并后文件外部依赖
index.js • 入口模块以及其依赖的本地模块
应用 • 引入 seed.js modules.js • 配置 combine true •
http://localhost:8111/?concat=1
• 动态 combo
动态 combo • 适合多入口或无入口应用或需要后期动态加载 • Gruntfile.js
Module.js • 包含项目所有的模块的内部依赖与外部依赖
应用 • 引入 seed.js modules.js • 配置 combine true •
http://localhost:8111/?combo=1
• 首屏闪烁
加载 css • 异步加载 css 造成闪烁
加载 css • 使用 importStyle 配置 modules.js 同步 combo 加载
css • 对首屏用到的所有模块调用 importStyle
大规模应用优化 • Gallery/mini 模块? • 打包进项目入口文件 • 动态 combo •
合并 gallery/mini 模块的 modules.js 到项目 modules.js