The Superpower of ASTs: How We Saved 16% on Our Bundle Size
summary
A custom Babel plugin walks the codebase AST, finds nested constant objects of strings, inlines just-used values, drops the imports and removes whole files, yielding a measured 16% bundle size reduction — 4250 imports removed and about 14 MB reduced in production builds, outperforming Webpack tree-shaking. Exact integration tests run transformed code to assert runtime behavior, and aggressive assertion checks (buildFrameError style) guard assumptions to catch edge cases during build time.
AI-written summary · about
chapters (8)
- 0:00Bundle size reduction intro
- 3:56Abstract Syntax Trees
- 7:05Babel with ASTs
- 8:29Challenges of working with ASTs
- 9:34Testing AST tools
- 11:40Guarding AST assumptions
- 13:46AST lifecycle best practices
- 14:51Key takeaways
related talks
45mBundler Bonanza
52m10KB or Bust: The Delicate Power of Webpack and Babel
58m10KB or Bust: The Delicate Power of Webpack and Babel
34mBuild-time Optimizations in JavaScript Applications
31m10KB or Bust" The Delicate Power of Webpack and Babel"
51mUnpacking Bundling
32mLet's Tree-shake it...
08mHow to Reduce Your Vue Bundle Size With Webpack