Что такое code splitting?

Middle
268 просмотров
AFK Offer AI

Code splitting — это разделение JS-бандла на несколько чанков, которые загружаются по необходимости. Вместо одного огромного bundle.js пользователь скачивает только код текущей страницы. В React реализуется через React.lazy + dynamic import(). Webpack и Vite делают это автоматически по dynamic import. Основные стратегии: split по маршрутам (каждая страница — отдельный чанк), по компонентам (тяжёлые модальники, графики), vendor chunk (библиотеки отдельно от кода приложения). Это значительно ускоряет первую загрузку.

Следующий вопрос

Как оптимизировать размер бандла?