Suggest an editImprove this articleRefine the answer for “What is code splitting?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Code splitting** is a technique where JavaScript code is divided into parts (chunks), and each one loads only when it is actually needed, rather than all at once when the page loads. **Key point:** code splitting is dividing code by meaning and by time, so only what's needed here and now gets loaded.Shown above the full answer for quick recall.Answer (EN)Image**Code splitting** is a technique where JavaScript code is divided into parts (chunks), and each one loads only when it is actually needed, rather than all at once when the page loads. --- ### What happens without code splitting: - The entire JS bundle loads on the first visit - Even components and pages the user will never see - This increases initial load, slows down rendering, and lowers TTI --- ### What code splitting does: - Splits the code into small chunks (by page, route, or component) - Loads the needed chunk on navigation (for example, to another page) - Used in bundlers: Webpack, Vite, Rollup, and frameworks: React, Vue, and others --- ### Example (React): ```js const LazyComponent = React.lazy(() => import('./HeavyComponent')) ``` This component loads only when it's actually needed. --- ### What it gives you: - a smaller initial bundle size - a faster first paint and LCP - lower memory consumption - faster interactivity (TTI) --- **Conclusion:** Code splitting is dividing code by meaning and by time, so only what's needed here and now gets loaded. Everything else comes later.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.