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
58
支付宝小程序的开放架构
yiminghe
0
140
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
170
react-based architecture
yiminghe
2
130
React Ecosystem At Ant Financial
yiminghe
4
2.1k
ant design preview
yiminghe
1
200
react best practice
yiminghe
3
160
react at alipay
yiminghe
43
4k
Other Decks in Technology
See All in Technology
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
300
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
On Your Data を超えていく!
hirotomotaguchi
2
680
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.2k
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
520
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
350
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
400
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
3
6.4k
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
200
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
220
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Side Projects
sachag
451
41k
BBQ
matthewcrist
80
8.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
KATA
mclloyd
15
12k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
In The Pink: A Labor of Love
frogandcode
138
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
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