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
140
支付宝小程序的开放架构
yiminghe
0
160
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
ずっと昔に Star をつけたはずの 思い出せない GitHub リポジトリを見つけたい！
rokuosan
0
150
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
380
Microsoft Azure全冠になってみた ~アレを使い倒した者が試験を制す！？~/Obtained all Microsoft Azure certifications Those who use "that" to the full will win the exam! ?
yuj1osm
2
120
APIとはなにか
mikanichinose
0
110
WACATE2024冬セッション資料（ユーザビリティ）
scarletplover
0
210
alecthomas/kong はいいぞ / kamakura.go#7
fujiwara3
1
300
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
160
継続的にアウトカムを生み出し ビジネスにつなげる、 戦略と運営に対するタイミーのQUEST(探求)
zigorou
0
680
NilAway による静的解析で「10 億ドル」を節約する #kyotogo / Kyoto Go 56th
ytaka23
3
380
開発生産性向上！ 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
420
能動的ドメイン名ライフサイクル管理のすゝめ / Practice on Active Domain Name Lifecycle Management
nttcom
0
120
re:Invent 2024 Innovation Talks(NET201)で語られた大切なこと
shotashiratori
0
320

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Code Review Best Practice
trishagee
65
17k
Become a Pro
speakerdeck
PRO
26
5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
A Tale of Four Properties
chriscoyier
157
23k
Automating Front-end Workflow
addyosmani
1366
200k
BBQ
matthewcrist
85
9.4k

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