Web Fundamentals

Tree Shaking: Eliminate Dead Code from Your Bundle

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
easyWeb Fundamentals

Tree Shaking: Eliminate Dead Code from Your Bundle

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRUse ES modules + named imports + sideEffects: false. Only ship code that is actually used.
High Signal
Google
Meta
Netflix
Agoda
Meesho
30-Second Answerstart every interview with this

Tree shaking is a build-time optimization where bundlers (Webpack, Vite, Rollup) automatically remove unused exports from your JavaScript bundles. It relies on static analysis of ES6 module syntax and proper configuration to maximize reduction in bundle size.

You tell the packer exactly what you need (named imports). The packer looks at your list and only puts those items in the suitcase. Anything you didn't explicitly ask for (unused exports) gets left behind — saving space and weight.

Import Statement (What you need)
Bundler Static Analysis
Mark Unused Exports
Remove Dead Code
Smaller Final Bundle

1How Tree Shaking Works

Bundlers perform static analysis on ES6 import/export syntax to determine which exports are used. Unused code is eliminated during the build process.

utils.tsts
export function add(a: number, b: number) { return a + b; }
export function subtract(a: number, b: number) { return a - b; }

// Only add is imported → subtract is removed

2Writing Tree-Shakeable Code

Use ES modules, named exports, avoid side effects, and prefer libraries designed for tree shaking (lodash-es, date-fns).

3Package Configuration

Mark packages as side-effect-free with `"sideEffects": false` in package.json. Use the `module` or `exports` field for modern bundlers.

4Verification

Use webpack-bundle-analyzer or Vite's visualizer to inspect what actually ends up in your final bundle.

Key Takeaways
  • ✓Tree shaking requires ES6 modules and named imports
  • ✓Mark side-effect-free packages with "sideEffects": false
  • ✓Prefer lodash-es, date-fns, and modular libraries
  • ✓Use bundle analyzer to verify results regularly
  • ✓Tree shaking is most effective when combined with code splitting
  • ✓Write code with bundle size in mind from the start
PreviousNext

Topic Guide

On this page