What to do when your bundle needs to go on a diet

on YouTube ↗38m

" summary

Uses a bundle analyzer and runtime inspection to find heavy modules: CodeMirror and KaTeX pulled in through a Markdown component. Replaces that component with a lightweight BaseMarkdown to cut the landing bundle from 571 KB to 153.5 KB (~4×). On the profile page, extracts a homework variable into a utility, wraps heavy child components, and switches the payment modal to lazy-loading with prefetch to reduce the profile bundle from 975 KB to 363 KB and remove about 370 modules.

AI-written summary · about

" chapters (5)

1. 0:00Introduction
2. 3:06Bundle analysis with BundleAnalyzer
3. 8:26Using Stethoscope tool
4. 13:34Bundle optimization results
5. 14:49Q&A

" related talks

• 31mBreaking up with the bundleJoel Hawksley · RailsConf 2022
• 51mUnpacking BundlingDaniel Roe · performance.now() 2024
• 52m10KB or Bust: The Delicate Power of Webpack and BabelBrian Holt · jsDay 2018
• 32mLet's Tree-shake it...Igor Minar · ReactiveConf 2017
• 08mHow to Reduce Your Vue Bundle Size With WebpackJennifer Bland · VueConf US 2019
• 58mResponsible JavaScriptJeremy Wagner · NDC Oslo 2019
• 58m10KB or Bust: The Delicate Power of Webpack and BabelBrian Holt · Voxxed Days Bucharest 2018
• 45mDark Art of Webpack Bundle TuningVijay Dharap · JSFoo 2017