Skip to main content

Що таке code splitting?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

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 - це поділ коду за змістом і часом, щоб вантажити лише те, що потрібно тут і зараз. Все інше - потім.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку