High-Performance Web UI with Web Components
summary
Library ships as ES2015 modules with multiple entry points and per-component register files and sets "sideEffects" in package.json to enable aggressive tree shaking while still allowing components to auto-register. Build uses Rollup/Webpack, PurgeCSS for CSS tree shaking, Lighthouse CI and bundle-size for regression checks. Icons are imported individually so hundreds of SVGs shrink to only those used. Global CSS drops from ~130 KB to ~8 KB compressed; hello-world payload is ~30 KB (14 KB JS, 2 KB CSS). CSS contain plus content-visibility: auto yields a grid render of 1k rows 4k cells in ~300–800 ms and 10k×40k in ~2.5 s on an M1. CDN import via import maps / skypack enables buildless consumption.
AI-written summary · about
chapters (31)
- 0:00Introduction
- 0:37Welcome
- 1:03Web Components
- 1:44Example Web Component
- 5:07Web Component Performance
- 7:28Dependencies
- 8:38Build Targets
- 9:39Code
- 11:05Components
- 11:33Tree Shaking
- 12:14Component Level Tree Shaking
- 13:45Side Effects
- 15:50Registration
- 18:06Icons
- 20:26CDN Performance
- 22:11Import Maps
- 23:56CSS Performance
- 24:35Text Compression
- 26:24CSS Custom Properties
- 29:29Tree Shake with CSS
- 30:56Purge CSS
- 32:06Browser Rendering
- 32:44CSS Contain
- 34:33CSS Content Visibility
- 35:56Performance
- 37:20Render Time
- 38:15Measure and Automate
- 38:42Tree Shake
- 39:34Lightweight Components
- 40:38Performance Benchmarks
- 40:51Resources
related talks
24mThe Good, The Bad, and The Web Components
28mThe (Real) State of Web Components
21mEvolution of Web Performance
41mHow we make Web Apps lightning fast at Microsoft!
52m10KB or Bust: The Delicate Power of Webpack and Babel
16mThe Evolution of Web Performance
24mSuperpowers of browser's Web API
31mFaster content websites via SSR and progressive hydration of Web Components