What is code splitting?

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):

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.