Web Fundamentals

Code Splitting: Optimize Bundle Size with Dynamic Imports

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)
mediumWeb Fundamentals

Code Splitting: Optimize Bundle Size with Dynamic Imports

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

Topic content

TL;DRSplit code by routes and heavy features using dynamic imports. Load only what the user needs, when they need it.
High Signal
Google
Meta
Netflix
Agoda
Meesho
30-Second Answerstart every interview with this

Code splitting breaks your JavaScript bundle into smaller chunks that load on demand. It dramatically reduces initial load time by shipping only the code required for the current view. Use dynamic imports (`import()`) with React.lazy() and Suspense for seamless integration.

Instead of packing everything for every trip (large initial bundle), pack only what you need for today's journey (route) and open side pockets (heavy components) only when required. Dynamic imports let you unzip those pockets on demand.

Initial Load (Core + Current Route)
Navigation → New Chunk Loads
User Action → Heavy Component Loads
Smaller Bundles = Faster Startup

1Route-Based Splitting

Automatically split by page/route. Each route becomes its own chunk, loaded only when the user navigates there.

App.tsxtsx
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));

<Suspense fallback={<Loading />}>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/dashboard" element={<Dashboard />} />
  </Routes>
</Suspense>

2Component-Based & Dynamic Imports

Split heavy components (charts, modals, editors) and load them conditionally on interaction or visibility.

3Vendor Splitting

Separate third-party libraries into their own chunk for better long-term caching since they change less frequently.

Key Takeaways
  • ✓Code splitting reduces initial bundle size and improves LCP
  • ✓Use React.lazy() + Suspense for easy route/component splitting
  • ✓Dynamic imports enable conditional and on-demand loading
  • ✓Separate vendor code for better caching
  • ✓Always provide loading states and error boundaries
  • ✓Measure bundle analyzer output and real-user performance
  • ✓Balance splitting with user-perceived latency
PreviousNext

Topic Guide

On this page