{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Что такое Lazy Loading"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Lazy loading"},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"отложенная загрузка компонентов или модулей"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Вместо того чтобы загружать "},{"type":"text","marks":[{"type":"bold"}],"text":"всё приложение целиком"},{"type":"text","text":" при старте,"},{"type":"hardBreak"},{"type":"text","text":"React загружает "},{"type":"text","marks":[{"type":"bold"}],"text":"только те части"},{"type":"text","text":", которые "},{"type":"text","marks":[{"type":"bold"}],"text":"реально нужны прямо сейчас"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Остальные компоненты подгружаются "},{"type":"text","marks":[{"type":"bold"}],"text":"по требованию (on demand)"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"📘 Пример: без lazy loading"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import HeavyChart from './HeavyChart';\n\nfunction Dashboard() {\n return (\n

Панель

\n {/* грузится сразу, даже если не виден */}\n

\n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"➡️ Даже если компонент "},{"type":"text","marks":[{"type":"code"}],"text":"HeavyChart"},{"type":"text","text":" показывается редко,"},{"type":"hardBreak"},{"type":"text","text":"он "},{"type":"text","marks":[{"type":"bold"}],"text":"всё равно загружается сразу"},{"type":"text","text":" вместе со всем бандлом."},{"type":"hardBreak"},{"type":"text","text":"Если таких компонентов много — "},{"type":"text","marks":[{"type":"bold"}],"text":"время загрузки страницы растёт"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✅ С lazy loading"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import React, { lazy, Suspense } from 'react';\n\nconst HeavyChart = lazy(() => import('./HeavyChart'));\n\nfunction Dashboard() {\n return (\n

Панель

\n\n Загрузка графика...

}>\n {/* подгрузится только когда дойдёт до него */}\n \n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧠 Теперь "},{"type":"text","marks":[{"type":"code"}],"text":"HeavyChart"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"bold"}],"text":"загружается только при первом рендере"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"когда React реально доберётся до него в дереве компонентов."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Как это работает “под капотом”"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React использует динамический импорт ("},{"type":"text","marks":[{"type":"code"}],"text":"import()"},{"type":"text","text":") и "},{"type":"text","marks":[{"type":"bold"}],"text":"code splitting"},{"type":"text","text":" (разделение кода)."},{"type":"hardBreak"},{"type":"text","text":"При сборке (Webpack / Vite / Next.js) создаются отдельные “чанки” (JS-файлы)."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"bundle.js → разбивается на:\n- main.js (основной код)\n- HeavyChart.chunk.js (тяжёлый компонент)\n- Settings.chunk.js\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда пользователь открывает страницу с "},{"type":"text","marks":[{"type":"code"}],"text":"HeavyChart"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"браузер делает дополнительный запрос:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"GET /static/js/HeavyChart.chunk.js\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"и только тогда загружает код компонента."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Компонент "},{"type":"text","marks":[{"type":"code"}],"text":"Suspense"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пока React загружает ленивый компонент,"},{"type":"hardBreak"},{"type":"text","text":"он "},{"type":"text","marks":[{"type":"bold"}],"text":"временно показывает заглушку"},{"type":"text","text":", указанную в "},{"type":"text","marks":[{"type":"code"}],"text":"fallback"},{"type":"text","text":"."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"}>\n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда загрузка завершена — React автоматически "},{"type":"text","marks":[{"type":"bold"}],"text":"заменяет "},{"type":"text","marks":[{"type":"code"}],"text":"Spinner"},{"type":"text","marks":[{"type":"bold"}],"text":" на компонент"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Пример для маршрутизации"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧩 Без lazy loading:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import Home from './pages/Home';\nimport Dashboard from './pages/Dashboard';\nimport Settings from './pages/Settings';\n\n\n } />\n } />\n } />\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Все страницы грузятся в один большой бандл."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"⚡ С lazy loading:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const Home = lazy(() => import('./pages/Home'));\nconst Dashboard = lazy(() => import('./pages/Dashboard'));\nconst Settings = lazy(() => import('./pages/Settings'));\n\n\n }>\n \n \n }\n />\n }>\n \n \n }\n />\n }>\n \n \n }\n />\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Теперь каждая страница грузится "},{"type":"text","marks":[{"type":"bold"}],"text":"отдельным JS-файлом"},{"type":"text","text":" —"},{"type":"hardBreak"},{"type":"text","text":"только при первом переходе на неё."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Когда это особенно полезно"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Lazy loading даёт максимальный эффект:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"При SPA с множеством страниц"},{"type":"text","text":" (Dashboard, Settings, Profile, Reports и т. д.);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для "},{"type":"text","marks":[{"type":"bold"}],"text":"тяжёлых зависимостей"},{"type":"text","text":" (графики, редакторы, карты, таблицы);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При "},{"type":"text","marks":[{"type":"bold"}],"text":"модалках"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"bold"}],"text":"динамических виджетах"},{"type":"text","text":", которые показываются редко;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для "},{"type":"text","marks":[{"type":"bold"}],"text":"админок"},{"type":"text","text":", где только часть страниц используется часто."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Как комбинировать с другими оптимизациями"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Приём"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"React.lazy() + Suspense"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Отложенная загрузка компонентов"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Dynamic import()"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Динамический импорт модулей без React"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Code splitting в Router"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Загружает страницы “по маршруту”"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Preload/Prefetch"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Заблаговременная загрузка нужных чанков"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"SSR + lazy"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно подгружать клиентские части после гидратации"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Lazy loading ≠ только для компонентов"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно лениво загружать:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧩 компоненты ("},{"type":"text","marks":[{"type":"code"}],"text":"React.lazy"},{"type":"text","text":");"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧠 хуки и утилиты ("},{"type":"text","marks":[{"type":"code"}],"text":"import()"},{"type":"text","text":" в момент использования);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🖼️ изображения ("},{"type":"text","marks":[{"type":"code"}],"text":"loading=\"lazy\""},{"type":"text","text":");"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧱 CSS-модули ("},{"type":"text","marks":[{"type":"code"}],"text":"import('./styles.css')"},{"type":"text","text":" внутри компонентов);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🌍 данные ("},{"type":"text","marks":[{"type":"code"}],"text":"fetch"},{"type":"text","text":" при первом открытии раздела)."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Итого"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Зачем"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🚀 Загружает компонент только при первом использовании"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Уменьшает размер стартового бандла"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚡ Делит код на чанки"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Быстрее загрузка и рендер страницы"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧠 Работает с "},{"type":"text","marks":[{"type":"code"}],"text":"React.lazy()"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"Suspense"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Управление отображением и fallback’ами"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💾 Экономит память и трафик"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Загрузка “по требованию”, а не “всё сразу”"}]}]}]}]},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💡 "},{"type":"text","marks":[{"type":"bold"}],"text":"Простая формула:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"\"Не загружай то, что пользователь ещё не видит.\""}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что такое Lazy loading компонентов?

Комментарии