Frontend System Design
/Advanced
Tree Shaking
Definition
Tree shaking is a dead-code elimination step performed by bundlers like Webpack or Vite. It statically analyzes ES Modules (`import`/`export`) and entirely removes unused code from the final bundle.
Explain Like I'm New
If you import a giant math library but only use the `add()` function, tree shaking deletes all the other unused functions so they don't bloat your app.
Interview Questions
basic
- How does Tree Shaking fundamentally work?
intermediate
- What are the performance implications of Tree Shaking?
advanced
- How does Tree Shaking scale in an enterprise architecture?
trick
- Are there scenarios where Tree Shaking is an anti-pattern?