Skip to content

Latest commit

 

History

History
103 lines (88 loc) · 5.3 KB

size.md

File metadata and controls

103 lines (88 loc) · 5.3 KB

Sizes

This doc tracks important size metrics for Material Web Components.

Sizes are tracked in bundles. A bundle is a single .js file for one or more components that includes all of the JavaScript and CSS needed, minus external dependencies. We track three metrics:

  • gzip - minified and compressed. This impacts download size, which can take longer over slow networks.

  • minified - minified and unpacked. This impacts the time it takes a page to be interactive, which can take longer on some devices.

  • % CSS - the amount of CSS compared to JavaScript. The bundle includes both JS and CSS, so this helps track changes to JS logic and CSS styles separately.

Last updated 2024-06-25.

Component gzip minified % CSS Import
All 70.9kb 448.5kb 65% CSS @material/web/all.js
Common 52.5kb 282.6kb 53% CSS @material/web/common.js
Button 8.1kb 46.9kb 66% CSS
6.7kb 27.7kb 49% CSS @material/web/button/elevated-button.js
6.7kb 27.5kb 49% CSS @material/web/button/filled-button.js
6.7kb 28.0kb 49% CSS @material/web/button/filled-tonal-button.js
6.4kb 26.0kb 48% CSS @material/web/button/outlined-button.js
6.2kb 24.5kb 45% CSS @material/web/button/text-button.js
Checkbox 6.8kb 26.5kb 38% CSS @material/web/checkbox/checkbox.js
Chips 10.1kb 60.7kb 64% CSS
4.8kb 16.5kb 22% CSS @material/web/chips/chip-set.js
6.3kb 27.0kb 51% CSS @material/web/chips/assist-chip.js
7.9kb 37.0kb 55% CSS @material/web/chips/filter-chip.js
7.4kb 33.8kb 54% CSS @material/web/chips/input-chip.js
6.4kb 27.4kb 51% CSS @material/web/chips/suggestion-chip.js
Dialog 4.7kb 16.2kb 29% CSS @material/web/dialog/dialog.js
Divider 0.6kb 1.3kb 34% CSS @material/web/divider/divider.js
Elevation 0.6kb 1.7kb 62% CSS @material/web/elevation/elevation.js
Fab 7.0kb 37.8kb 67% CSS
6.6kb 33.2kb 64% CSS @material/web/fab/fab.js
5.8kb 24.9kb 52% CSS @material/web/fab/branded-fab.js
Field 6.0kb 40.6kb 82% CSS
4.6kb 24.9kb 74% CSS @material/web/field/filled-field.js
5.0kb 27.1kb 76% CSS @material/web/field/outlined-field.js
Focus 1.5kb 5.4kb 49% CSS @material/web/focus/md-focus-ring.js
Icon 0.7kb 1.3kb 47% CSS @material/web/icon/icon.js
Icon button 7.3kb 42.5kb 65% CSS
5.8kb 23.2kb 41% CSS @material/web/iconbutton/icon-button.js
6.0kb 25.2kb 45% CSS @material/web/iconbutton/filled-icon-button.js
6.0kb 25.8kb 47% CSS @material/web/iconbutton/filled-tonal-icon-button.js
6.0kb 24.8kb 45% CSS @material/web/iconbutton/outlined-icon-button.js
List 7.0kb 27.5kb 34% CSS
1.6kb 4.7kb 4% CSS @material/web/list/list.js
5.8kb 23.1kb 40% CSS @material/web/list/list-item.js
Menu 13.6kb 54.7kb 22% CSS
8.0kb 29.7kb 17% CSS @material/web/menu/menu.js
6.5kb 25.8kb 37% CSS @material/web/menu/menu-item.js
8.5kb 32.7kb 11% CSS @material/web/menu/sub-menu.js
Progress 3.5kb 13.8kb 69% CSS
2.6kb 8.6kb 63% CSS @material/web/progress/linear-progress.js
2.2kb 7.3kb 57% CSS @material/web/progress/circular-progress.js
Radio 6.7kb 24.7kb 28% CSS @material/web/radio/radio.js
Ripple 2.7kb 7.8kb 13% CSS @material/web/ripple/ripple.js
Select 26.1kb 144.8kb 57% CSS
18.4kb 91.6kb 47% CSS @material/web/select/filled-select.js
18.6kb 92.1kb 47% CSS @material/web/select/outlined-select.js
6.6kb 26.8kb 36% CSS @material/web/select/select-option.js
Slider 9.6kb 42.4kb 45% CSS @material/web/slider/slider.js
Switch 7.7kb 32.6kb 46% CSS @material/web/switch/switch.js
Tabs 7.8kb 35.4kb 50% CSS
6.2kb 22.1kb 25% CSS @material/web/tabs/tabs.js
6.2kb 25.8kb 48% CSS @material/web/tabs/primary-tab.js
6.1kb 25.3kb 48% CSS @material/web/tabs/secondary-tab.js
Text field 14.1kb 94.1kb 73% CSS
11.0kb 61.9kb 61% CSS @material/web/textfield/filled-text-field.js
11.2kb 62.3kb 61% CSS @material/web/textfield/outlined-text-field.js