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
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
1
130
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
220
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
160
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
APIテスト自動化の勘所
yokawasa
7
4.2k
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.5k
Fargateを使った研修の話
takesection
0
140
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
520
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.6k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1365
200k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Side Projects
sachag
452
42k
Designing for Performance
lara
604
68k
Happy Clients
brianwarren
97
6.7k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Code Review Best Practice
trishagee
64
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
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