Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке code splitting?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Code splitting** - це техніка, за якої JavaScript-код ділиться на частини (чанки), і кожна завантажується лише тоді, коли реально потрібна, а не вся одразу при завантаженні сторінки. **Ключове:** code splitting - це поділ коду за змістом і часом, щоб вантажити лише те, що потрібно тут і зараз.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Code splitting** - це техніка, за якої JavaScript-код ділиться на частини (чанки), і кожна завантажується лише тоді, коли реально потрібна, а не вся одразу при завантаженні сторінки. --- ### Що відбувається без code splitting: - Весь JS-бандл завантажується при першому заході - Навіть ті компоненти і сторінки, які користувач не побачить - Це збільшує initial load, гальмує рендер і знижує TTI --- ### Що робить code splitting: - Ділить код на маленькі чанки (за сторінками, маршрутами, компонентами) - Завантажує потрібний чанк при переході (наприклад, на іншу сторінку) - Використовується в бандлерах: Webpack, Vite, Rollup і фреймворках: React, Vue та ін. --- ### Приклад (React): ```js const LazyComponent = React.lazy(() => import('./HeavyComponent')) ``` Цей компонент завантажиться лише тоді, коли реально знадобиться. --- ### Що дає: - менший розмір початкового бандла - швидший first paint і LCP - менше споживання пам'яті - пришвидшення взаємодії (TTI) --- **Висновок:** Code splitting - це поділ коду за змістом і часом, щоб вантажити лише те, що потрібно тут і зараз. Все інше - потім.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.