|
| 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