Code Splitting

Definitions

1. Breaking a JavaScript bundle into smaller chunks that are loaded on demand rather than all upfront. Route-based splitting loads code per page; component-based splitting uses dynamic import() for heavy components. Reduces initial load time by only shipping the code needed for the current page. Supported by webpack, Vite, and Rollup.

   In plain English: Breaking your JavaScript into smaller files that load only when needed, making the initial page load faster.

   Example: "Lazy-load the admin dashboard with React.lazy() — there's no reason to ship 200KB of admin code to regular users."

Related Terms

• Pack
• Hydration
• Islands Architecture
• Virtual DOM
• Debounce
• Throttle
• Tree Shaking
• Skeleton Screen
• Responsive Images
• Critical Rendering Path
• Asset Bundler
• Code Bundle