Dark Art of Webpack Bundle Tuning
summary
A small Vue demo app with Bootstrap Moment Lodash OpenLayers and D3 proves concrete fixes: run webpack CLI with --json output and inspect it with webpack-bundle-analyzer and a visualizer to find duplicates and dependency roots; switch static imports to dynamic import for lazy chunks so home load drops from ~349 KB transferred to ~41 KB and overall bundles shrink (example: vendor 2 MB → 236 KB, total 5.73 MB → 2.6 MB); use tree‑shakable module builds, lodash webpack plugin, context‑replacement for Moment locales, and extract CSS into separate files.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 4:21Webpack is a dumb system
- 6:53Tools
- 11:27Demo
- 12:41Bundle Analyzer
- 15:33Lazy Loading
- 18:05OpenLayers Optimization
- 20:13D3 Selection
- 26:39CSS Usage
- 30:21Results
- 33:17Conclusion
- 34:15App Common Bundle
- 35:33Legacy Application
- 36:41Splitting Code
- 38:29Using CDN
- 39:54Question
related talks
08mHow to Reduce Your Vue Bundle Size With Webpack
31mDark Art of Webpack Bundle Tuning
07mThe Lazy Way to Better Performance
52m10KB or Bust: The Delicate Power of Webpack and Babel
23mStreamline your code with webpack
34mGift Wrap Your Code with Webpack
58m10KB or Bust: The Delicate Power of Webpack and Babel
41mHow we make Web Apps lightning fast at Microsoft!