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

kissy modularization part2

yiminghe
February 21, 2014
Technology
1
1.7k

kissy modularization part2

part2 of kissy modularization tutorials

yiminghe

February 21, 2014
Tweet

More Decks by yiminghe

See All by yiminghe
小程序终端技术架构
yiminghe
0
150
支付宝小程序的开放架构
yiminghe
0
170
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
190
react-based architecture
yiminghe
2
140
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
250
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.2k

Other Decks in Technology

See All in Technology
今年一年で頑張ること / What I will do my best this year
pauli
1
220
デザインシステムを始めるために取り組んだこと - TechTrain x ゆめみ ここを意識してほしい！リファクタリング勉強会
kajitack
2
130
Copilotの力を実感！ 3ヶ月間の生成AI研修の試行錯誤＆成功事例をご紹介。果たして得たものとは・・？
ktc_shiori
0
360
[IBM TechXchange Dojo]Watson Discoveryとwatsonx.aiでRAGを実現!座学①
siyuanzh09
0
110
Kotlin Multiplatformのポテンシャル
recruitengineers
PRO
2
150
「隙間家具OSS」に至る道/Fujiwara Tech Conference 2025
fujiwara3
7
6.5k
メールヘッダーを見てみよう
hinono
0
120
自社 200 記事を元に整理した読みやすいテックブログを書くための Tips 集
masakihirose
2
340
dbtを中心にして組織のアジリティとガバナンスのトレードオンを考えてみた
gappy50
0
310
月間60万ユーザーを抱える 個人開発サービス「Walica」の 技術スタック変遷
miyachin
1
150
When Windows Meets Kubernetes…
pichuang
0
310
[IBM TechXchange Dojo]Watson Discoveryとwatsonx.aiでRAGを実現!事例のご紹介+座学②
siyuanzh09
0
110

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
How GitHub (no longer) Works
holman
312
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
Six Lessons from altMBA
skipperchong
27
3.6k
Become a Pro
speakerdeck
PRO
26
5.1k
Mobile First: as difficult as doing things right
swwweet
222
9k
We Have a Design System, Now What?
morganepeng
51
7.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k

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