What is code splitting?

Code splitting is a technique for splitting the final bundle into several smaller parts instead of one large file. In Webpack this allows loading only the code that is actually needed at that moment.

---

#Why it is used

• speeds up the initial page load - no need to load all the JS at once
• reduces the size of the main bundle
• loads additional modules "on demand"

---

#Typical examples

1. Splitting vendor code (React, lodash, moment, etc.) into a separate bundle
2. Lazy loading pages in an SPA (dynamic import()):

3. Optimization via splitChunks in Webpack

---

#Summary

Code splitting makes the application faster and more efficient, because the user loads only the code they need, while the rest is pulled in later, as needed.