Merge pull request #5285 from material-components:size

PiperOrigin-RevId: 591037361

.github/workflows/update-size-on-main.yml

@@ -0,0 +1,43 @@
+name: Update size
+
+on:
+  push:
+    branches: main
+  workflow_dispatch:
+    # allows triggering from the github UI
+jobs:
+  check-for-doc-changes:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: npm
+      - uses: google/wireit@setup-github-actions-caching/v1
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Update Size
+        run: npm run update-size
+
+      - name: Check if update-size produces git diff
+        id: ifChange
+        run: git diff --exit-code || echo "::set-output name=changed::yes"
+
+      - name: Create or update PR
+        if: steps.ifChange.outputs.changed == 'yes'
+        uses: peter-evans/create-pull-request@v5
+        with:
+          token: ${{ secrets.LIT_ROBOT_ACCESS_TOKEN }}
+          commit-message: 'chore: update sizes'
+          author: lit-robot <[email protected]>
+          committer: lit-robot <[email protected]>
+          title: 'chore: update sizes'
+          body: This PR was auto generated by the update-size-on-main GitHub action.
+          reviewers: e111077,asyncliz
+          branch: auto-update-size
+          # Don't automatically add Ready for Google label until we're ready
+          # since this will be noisy.

README.md

@@ -16,5 +16,6 @@ Google's open-source design system.
 -   [Introduction](docs/intro.md)
 -   [Roadmap](docs/roadmap.md)
 -   [Quick start](docs/quick-start.md)
+-   [Bundle sizes](docs/size.md)
 -   [Component docs](docs/components/)
 -   [Browser support and FAQ](docs/support.md)

docs/size.md

@@ -0,0 +1,96 @@
+# Sizes
+
+<!-- go/mwc-size -->
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2023-12-13' }
+*-->
+
+<!-- [TOC] -->
+
+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.
+
+<!-- Autogenerated below, do not update! -->
+<!-- MWC_UPDATE_TRACKING_START -->
+
+<sub>Last updated 2023-12-13.</sub>
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Component | gzip | minified | *% CSS* | Import |
+| --- | --- | --- | --- | --- |
+| **All** | **70.1kb** | 451.9kb | *66% CSS* | `@material/web/all.js` |
+| **Common** | **51.5kb** | 282.2kb | *54% CSS* | `@material/web/common.js` |
+| **Button** | **8.0kb** | 46.3kb | *66% CSS* |  |
+|  | 6.7kb | 27.4kb | *49% CSS* | `@material/web/button/elevated-button.js` |
+|  | 6.6kb | 27.3kb | *49% CSS* | `@material/web/button/filled-button.js` |
+|  | 6.7kb | 27.7kb | *49% CSS* | `@material/web/button/filled-tonal-button.js` |
+|  | 6.4kb | 25.7kb | *48% CSS* | `@material/web/button/outlined-button.js` |
+|  | 6.2kb | 24.2kb | *45% CSS* | `@material/web/button/text-button.js` |
+| **Checkbox** | **7.0kb** | 28.5kb | *43% CSS* | `@material/web/checkbox/checkbox.js` |
+| **Chips** | **10.0kb** | 60.4kb | *64% CSS* |  |
+|  | 4.8kb | 16.4kb | *22% CSS* | `@material/web/chips/chip-set.js` |
+|  | 6.3kb | 26.8kb | *51% CSS* | `@material/web/chips/assist-chip.js` |
+|  | 7.9kb | 37.0kb | *55% CSS* | `@material/web/chips/filter-chip.js` |
+|  | 7.3kb | 33.7kb | *54% CSS* | `@material/web/chips/input-chip.js` |
+|  | 6.4kb | 27.2kb | *51% CSS* | `@material/web/chips/suggestion-chip.js` |
+| **Dialog** | **4.2kb** | 15.2kb | *36% CSS* | `@material/web/dialog/dialog.js` |
+| **Divider** | **0.7kb** | 1.4kb | *39% CSS* | `@material/web/divider/divider.js` |
+| **Elevation** | **0.7kb** | 1.7kb | *62% CSS* | `@material/web/elevation/elevation.js` |
+| **Fab** | **6.9kb** | 37.1kb | *67% CSS* |  |
+|  | 6.6kb | 32.8kb | *64% CSS* | `@material/web/fab/fab.js` |
+|  | 5.8kb | 24.6kb | *51% CSS* | `@material/web/fab/branded-fab.js` |
+| **Field** | **6.0kb** | 40.5kb | *83% CSS* |  |
+|  | 4.6kb | 24.8kb | *75% CSS* | `@material/web/field/filled-field.js` |
+|  | 5.0kb | 27.1kb | *76% CSS* | `@material/web/field/outlined-field.js` |
+| **Focus** | **1.6kb** | 5.2kb | *46% CSS* | `@material/web/focus/md-focus-ring.js` |
+| **Icon** | **0.7kb** | 1.3kb | *46% CSS* | `@material/web/icon/icon.js` |
+| **Icon button** | **7.3kb** | 42.0kb | *65% CSS* |  |
+|  | 5.8kb | 23.1kb | *42% CSS* | `@material/web/iconbutton/icon-button.js` |
+|  | 6.0kb | 25.0kb | *45% CSS* | `@material/web/iconbutton/filled-icon-button.js` |
+|  | 6.0kb | 25.5kb | *46% CSS* | `@material/web/iconbutton/filled-tonal-icon-button.js` |
+|  | 6.0kb | 24.6kb | *45% CSS* | `@material/web/iconbutton/outlined-icon-button.js` |
+| **List** | **6.9kb** | 27.2kb | *35% CSS* |  |
+|  | 1.6kb | 4.5kb | *5% CSS* | `@material/web/list/list.js` |
+|  | 5.8kb | 23.0kb | *40% CSS* | `@material/web/list/list-item.js` |
+| **Menu** | **13.5kb** | 53.9kb | *23% CSS* |  |
+|  | 7.9kb | 28.8kb | *17% CSS* | `@material/web/menu/menu.js` |
+|  | 6.5kb | 25.6kb | *37% CSS* | `@material/web/menu/menu-item.js` |
+|  | 8.4kb | 31.9kb | *11% CSS* | `@material/web/menu/sub-menu.js` |
+| **Progress** | **3.5kb** | 13.9kb | *70% CSS* |  |
+|  | 2.6kb | 8.6kb | *64% CSS* | `@material/web/progress/linear-progress.js` |
+|  | 2.2kb | 7.4kb | *57% CSS* | `@material/web/progress/circular-progress.js` |
+| **Radio** | **6.9kb** | 26.0kb | *31% CSS* | `@material/web/radio/radio.js` |
+| **Ripple** | **2.8kb** | 7.9kb | *14% CSS* | `@material/web/ripple/ripple.js` |
+| **Select** | **25.6kb** | 142.5kb | *57% CSS* |  |
+|  | 17.8kb | 89.3kb | *48% CSS* | `@material/web/select/filled-select.js` |
+|  | 18.1kb | 89.9kb | *48% CSS* | `@material/web/select/outlined-select.js` |
+|  | 6.6kb | 26.6kb | *36% CSS* | `@material/web/select/select-option.js` |
+| **Slider** | **9.7kb** | 45.0kb | *49% CSS* | `@material/web/slider/slider.js` |
+| **Switch** | **7.8kb** | 34.8kb | *53% CSS* | `@material/web/switch/switch.js` |
+| **Tabs** | **7.9kb** | 35.1kb | *50% CSS* |  |
+|  | 6.2kb | 21.9kb | *25% CSS* | `@material/web/tabs/tabs.js` |
+|  | 6.3kb | 25.6kb | *48% CSS* | `@material/web/tabs/primary-tab.js` |
+|  | 6.2kb | 25.2kb | *48% CSS* | `@material/web/tabs/secondary-tab.js` |
+| **Text field** | **13.7kb** | 93.0kb | *74% CSS* |  |
+|  | 10.7kb | 60.8kb | *62% CSS* | `@material/web/textfield/filled-text-field.js` |
+|  | 10.9kb | 61.3kb | *62% CSS* | `@material/web/textfield/outlined-text-field.js` |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- MWC_UPDATE_TRACKING_END -->