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
150
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
260
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.2k

Other Decks in Technology

See All in Technology
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
120
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
3
300
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
350
現場で役立つAPIデザイン
nagix
32
11k
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
4
300
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
370
モノレポ開発のエラー、誰が見る？Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
790
開発組織のための セキュアコーディング研修の始め方
flatt_security
3
1.4k
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
640
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
370
Data-centric AI入門第6章：Data-centric AIの実践例
x_ttyszk
1
390

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Become a Pro
speakerdeck
PRO
26
5.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
We Have a Design System, Now What?
morganepeng
51
7.4k
What's in a price? How to price your products and services
michaelherold
244
12k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
It's Worth the Effort
3n
184
28k
Being A Developer After 40
akosma
89
590k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
174
51k

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