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
130
支付宝小程序的开放架构
yiminghe
0
160
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
180
react-based architecture
yiminghe
2
140
React Ecosystem At Ant Financial
yiminghe
4
2.1k
ant design preview
yiminghe
1
230
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.1k
Other Decks in Technology
See All in Technology
Autify Company Deck
autifyhq
1
39k
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.4k
Fargateを使った研修の話
takesection
0
110
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
600
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.4k
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
210
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
130
APIテスト自動化の勘所
yokawasa
7
4.1k
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Designing for humans not robots
tammielis
249
25k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Statistics for Hackers
jakevdp
796
220k
Become a Pro
speakerdeck
PRO
24
5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Speed Design
sergeychernyshev
24
570
Happy Clients
brianwarren
97
6.7k
Thoughts on Productivity
jonyablonski
67
4.3k
Building Adaptive Systems
keathley
38
2.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