В крупных веб-приложениях десятки компонентов, объёмные библиотеки и множество изображений нередко превращают первую загрузку в настоящее испытание. Пользователи раздражаются, уходят, а позиции в поисковиках медленно сползают вниз. Ленивая загрузка и код-сплиттинг позволяют браузеру работать избирательно: получать только то, что требуется прямо сейчас, и заметно сокращать стартовый объём данных.
Ленивая загрузка в действии
Суть ленивой загрузки в том, чтобы отложить ресурсы до момента реальной необходимости. Браузер не тянет сразу всё — изображения, видео, модули кода. Они приходят по запросу: при прокрутке, клике или переходе на нужный участок страницы.
В HTML5 для изображений и iframe достаточно одного атрибута loading="lazy". Браузер самостоятельно следит за видимостью и начинает загрузку. Такой подход особенно спасает на длинных страницах — в статьях, галереях, интернет-магазинах. В JavaScript принцип тот же: динамический импорт или готовые хелперы. Результат — быстрее старт и меньше расхода трафика на мобильных устройствах.
Код-сплиттинг: делим бандл с умом
Код-сплиттинг разбивает JavaScript-бандл на компактные независимые части, которые загружаются только при необходимости. Вместо одного большого файла в несколько мегабайт приложение получает основной чанк для критического пути и дополнительные — под конкретные страницы или возможности.Webpack, Vite, Rollup сами создают такие чанки, когда видят динамический импорт. В React это удобно делать через React.lazy() и Suspense:
JS
// Находим блок, куда вставим Dashboard
const root = document.getElementById('root');
//Показываем заглушку (Аналог fallback=)
root.textContent = 'Загрузка...';
//Лениво грузим файл (Аналог React.lazy и import)
import('./Dashboard.js').then(() => {
//Файл скачался — убираем загрузку и показываем Dashboard
root.textContent = 'Тяжелый Dashboard загружен!';
});