Що таке code splitting?

Code splitting - це техніка розділення підсумкового бандла на кілька дрібніших частин замість одного великого файлу. У Webpack це дозволяє завантажувати тільки той код, який реально потрібен у цей момент.

---

#Навіщо це використовується

• прискорює початкове завантаження сторінки - не потрібно вантажити весь JS одразу
• зменшує розмір основного бандла
• завантажує додаткові модулі "за вимогою"

---

#Типові приклади

1. Розділення vendor-коду (React, lodash, moment тощо) в окремий бандл
2. Лінива завантаження сторінок у SPA (динамічні import()):

3. Оптимізація через splitChunks у Webpack

---

#Підсумок

Code splitting робить застосунок швидшим і ефективнішим за рахунок того, що користувач завантажує тільки потрібний код, а решта підтягується пізніше, у міру необхідності.