Skip to content

Commit 1d9a552

Browse files
committed
docs: add size tracking
1 parent 79f7dd2 commit 1d9a552

File tree

7 files changed

+693
-86
lines changed

7 files changed

+693
-86
lines changed

docs/size.md

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# Sizes
2+
3+
<!-- go/mwc-size -->
4+
5+
<!--*
6+
# Document freshness: For more information, see go/fresh-source.
7+
freshness: { owner: 'lizmitchell' reviewed: '2023-12-11' }
8+
*-->
9+
10+
<!-- [TOC] -->
11+
12+
This doc tracks important size metrics for Material Web Components.
13+
14+
- **gzip** - minified and compressed. This impacts download size, which can
15+
take longer on slow networks.
16+
17+
- **minified** - minified and unpacked. This impacts the time it takes a page
18+
to be interactive, which can take longer on some devices.
19+
20+
<!-- MWC_UPDATE_TRACKING_START -->
21+
22+
<small>Last updated 2023-12-12.</small>
23+
24+
<!-- mdformat off(autogenerated might break rendering in catalog) -->
25+
26+
Component | gzip | minified | Import
27+
--- | --- | --- | ---
28+
**All** | **70.0kb** | 451.6kb <small>*(66% CSS)*</small> | *@material/web/all.js*
29+
**Common** | **51.4kb** | 281.9kb <small>*(54% CSS)*</small> | *@material/web/common.js*
30+
**Button** | **8.0kb** | 46.3kb <small>*(66% CSS)*</small> |
31+
| 6.7kb | 27.4kb <small>*(49% CSS)*</small> | *@material/web/button/elevated-button.js*
32+
| 6.6kb | 27.3kb <small>*(49% CSS)*</small> | *@material/web/button/filled-button.js*
33+
| 6.7kb | 27.7kb <small>*(49% CSS)*</small> | *@material/web/button/filled-tonal-button.js*
34+
| 6.4kb | 25.7kb <small>*(48% CSS)*</small> | *@material/web/button/outlined-button.js*
35+
| 6.2kb | 24.2kb <small>*(45% CSS)*</small> | *@material/web/button/text-button.js*
36+
**Checkbox** | **7.0kb** | 28.5kb <small>*(43% CSS)*</small> | *@material/web/checkbox/checkbox.js*
37+
**Chips** | **9.9kb** | 60.1kb <small>*(64% CSS)*</small> |
38+
| 4.8kb | 16.4kb <small>*(22% CSS)*</small> | *@material/web/chips/chip-set.js*
39+
| 6.3kb | 26.8kb <small>*(51% CSS)*</small> | *@material/web/chips/assist-chip.js*
40+
| 7.8kb | 36.7kb <small>*(56% CSS)*</small> | *@material/web/chips/filter-chip.js*
41+
| 7.3kb | 33.6kb <small>*(54% CSS)*</small> | *@material/web/chips/input-chip.js*
42+
| 6.4kb | 27.2kb <small>*(51% CSS)*</small> | *@material/web/chips/suggestion-chip.js*
43+
**Dialog** | **4.2kb** | 15.2kb <small>*(36% CSS)*</small> | *@material/web/dialog/dialog.js*
44+
**Divider** | **0.7kb** | 1.4kb <small>*(39% CSS)*</small> | *@material/web/divider/divider.js*
45+
**Elevation** | **0.7kb** | 1.7kb <small>*(62% CSS)*</small> | *@material/web/elevation/elevation.js*
46+
**Fab** | **6.9kb** | 37.1kb <small>*(67% CSS)*</small> |
47+
| 6.6kb | 32.8kb <small>*(64% CSS)*</small> | *@material/web/fab/fab.js*
48+
| 5.8kb | 24.6kb <small>*(51% CSS)*</small> | *@material/web/fab/branded-fab.js*
49+
**Field** | **6.0kb** | 40.5kb <small>*(83% CSS)*</small> |
50+
| 4.6kb | 24.8kb <small>*(75% CSS)*</small> | *@material/web/field/filled-field.js*
51+
| 5.0kb | 27.1kb <small>*(76% CSS)*</small> | *@material/web/field/outlined-field.js*
52+
**Focus** | **1.6kb** | 5.2kb <small>*(46% CSS)*</small> | *@material/web/focus/md-focus-ring.js*
53+
**Icon** | **0.7kb** | 1.3kb <small>*(46% CSS)*</small> | *@material/web/icon/icon.js*
54+
**Icon button** | **7.3kb** | 42.0kb <small>*(65% CSS)*</small> |
55+
| 5.8kb | 23.1kb <small>*(42% CSS)*</small> | *@material/web/iconbutton/icon-button.js*
56+
| 6.0kb | 25.0kb <small>*(45% CSS)*</small> | *@material/web/iconbutton/filled-icon-button.js*
57+
| 6.0kb | 25.5kb <small>*(46% CSS)*</small> | *@material/web/iconbutton/filled-tonal-icon-button.js*
58+
| 6.0kb | 24.6kb <small>*(45% CSS)*</small> | *@material/web/iconbutton/outlined-icon-button.js*
59+
**List** | **6.9kb** | 27.2kb <small>*(35% CSS)*</small> |
60+
| 1.6kb | 4.5kb <small>*(5% CSS)*</small> | *@material/web/list/list.js*
61+
| 5.8kb | 23.0kb <small>*(40% CSS)*</small> | *@material/web/list/list-item.js*
62+
**Menu** | **13.5kb** | 53.9kb <small>*(23% CSS)*</small> |
63+
| 7.9kb | 28.8kb <small>*(17% CSS)*</small> | *@material/web/menu/menu.js*
64+
| 6.5kb | 25.6kb <small>*(37% CSS)*</small> | *@material/web/menu/menu-item.js*
65+
| 8.4kb | 31.9kb <small>*(11% CSS)*</small> | *@material/web/menu/sub-menu.js*
66+
**Progress** | **3.5kb** | 13.9kb <small>*(70% CSS)*</small> |
67+
| 2.6kb | 8.6kb <small>*(64% CSS)*</small> | *@material/web/progress/linear-progress.js*
68+
| 2.2kb | 7.4kb <small>*(57% CSS)*</small> | *@material/web/progress/circular-progress.js*
69+
**Radio** | **6.9kb** | 26.0kb <small>*(31% CSS)*</small> | *@material/web/radio/radio.js*
70+
**Ripple** | **2.8kb** | 7.9kb <small>*(14% CSS)*</small> | *@material/web/ripple/ripple.js*
71+
**Select** | **25.6kb** | 142.5kb <small>*(57% CSS)*</small> |
72+
| 17.8kb | 89.3kb <small>*(48% CSS)*</small> | *@material/web/select/filled-select.js*
73+
| 18.1kb | 89.9kb <small>*(48% CSS)*</small> | *@material/web/select/outlined-select.js*
74+
| 6.6kb | 26.6kb <small>*(36% CSS)*</small> | *@material/web/select/select-option.js*
75+
**Slider** | **9.7kb** | 45.0kb <small>*(49% CSS)*</small> | *@material/web/slider/slider.js*
76+
**Switch** | **7.8kb** | 34.8kb <small>*(53% CSS)*</small> | *@material/web/switch/switch.js*
77+
**Tabs** | **7.9kb** | 35.1kb <small>*(50% CSS)*</small> |
78+
| 6.2kb | 21.9kb <small>*(25% CSS)*</small> | *@material/web/tabs/tabs.js*
79+
| 6.3kb | 25.6kb <small>*(48% CSS)*</small> | *@material/web/tabs/primary-tab.js*
80+
| 6.2kb | 25.2kb <small>*(48% CSS)*</small> | *@material/web/tabs/secondary-tab.js*
81+
**Text field** | **13.7kb** | 93.0kb <small>*(74% CSS)*</small> |
82+
| 10.7kb | 60.8kb <small>*(62% CSS)*</small> | *@material/web/textfield/filled-text-field.js*
83+
| 10.9kb | 61.3kb <small>*(62% CSS)*</small> | *@material/web/textfield/outlined-text-field.js*
84+
85+
<!-- mdformat on(autogenerated might break rendering in catalog) -->
86+
87+
<!-- MWC_UPDATE_TRACKING_END -->

0 commit comments

Comments
 (0)