|
164 | 164 | )}, {@render color("var(--m3c-primary-container)", "library baseline")}, and {@render color( |
165 | 165 | "var(--m3c-primary)", |
166 | 166 | "full size to render a Button", |
167 | | - )}. |
| 167 | + )}. The build setups are |
| 168 | + <a href="https://github.com/KTibow/m3-svelte-comparisons">available on GitHub</a>. |
168 | 169 | </p> |
169 | 170 | <label> |
170 | 171 | <Switch bind:checked={useCompression} /> |
|
186 | 187 | {@render stackedBars("JS", [uc(37.43, 14.41), uc(23.5, 9.22), uc(19.82, 7.95)])} |
187 | 188 |
|
188 | 189 | <h3><a href="https://material-web.dev/">Material Web</a> (Vite)</h3> |
189 | | -<p>Material Web uses web components, but isn't maintained.</p> |
| 190 | +<p> |
| 191 | + Material Web uses web components, but <a |
| 192 | + href="https://github.com/material-components/material-web/discussions/5642">isn't developed</a |
| 193 | + >. |
| 194 | +</p> |
190 | 195 | <p>Takes {uc(0.35 + 45.5, 0.24 + 13.53).toFixed(1)}kB to render a Button.</p> |
191 | 196 | {@render stackedBars("HTML", [uc(0.35, 0.24), uc(0.3, 0.22), uc(0.3, 0.22)])} |
192 | 197 | {@render stackedBars("JS", [uc(45.5, 13.53), uc(25.42, 9.23), uc(15.39, 5.91)])} |
|
226 | 231 | <h3>Fun fact</h3> |
227 | 232 | <p> |
228 | 233 | Most of Svelte and M3 Svelte's optimizations show up in this simple demo. For example, you can see |
229 | | - how Svelte let the button be rendered with just HTML and CSS, and how the CSS that was shipped was |
230 | | - optimized to the specific component. But you could tip the scale even further by adding an icon. |
231 | | - Material Web, M3E, and Beer CSS pull in <em>all icons</em> (by default) through an icon font, which |
232 | | - can weigh nearly 300kB. |
| 234 | + how Svelte let the button be rendered with just HTML and CSS, and how the tokens and styles that |
| 235 | + were shipped was optimized to the specific component. But adding an icon would tip the scale even |
| 236 | + further. Material Web, M3E, and Beer CSS pull in <em>all icons</em> (by default) through an icon font, |
| 237 | + which can weigh nearly 300kB. |
233 | 238 | </p> |
234 | 239 |
|
235 | 240 | <style> |
|
0 commit comments