Code splitting
Тема дорожной карты · React
Разделение кода — это техника оптимизации производительности в React, которая делит JavaScript-бандл на небольшие чанки, загружаемые по требованию, а не все сразу. React поддерживает разделение кода нативно через React.lazy() совместно с Suspense, обеспечивая динамические импорты, которые откладывают загрузку компонента до момента его реального использования. Применяя разделение кода на уровне маршрутов или функций, фронтенд-разработчики могут значительно уменьшить начальный размер бандла и улучшить время до интерактивности (TTI) для React-приложений. Инструменты вроде Webpack и Vite берут на себя механику бандлинга, тогда как React.lazy() предоставляет декларативный API для указания точек разделения в JSX. Эффективное разделение кода в React — это ключевая стратегия производительности, описанная как в официальной документации React, так и в таких фреймворках, как Next.js.
Как это работает
Code splitting — это в основном избегание ненужных ререндеров. React.memo(Component) пропускает ререндер, если props равны по ссылке; парная связка с useMemo/useCallback стабилизирует props. lazy(() => import("./X")) + <Suspense fallback={...}> откладывает загрузку chunk до момента нужды (route-based code splitting). React Profiler (в DevTools) показывает, какой компонент сколько занял и почему ререндерился — читайте перед тюнингом вслепую.
Когда применять
Сначала профайл, потом оптимизация. Lazy-load по route-границе для любого бандла >~200 KB gzipped. Мемоизируйте детей дорогих списков через React.memo + стабильные коллбэки. Windowing (react-window, react-virtualized) — для списков 1000+ элементов. Пропустите useMemo/useCallback для тривиальных значений — оверхед учёта дороже сэкономленного compute в 90% случаев.
Типичные ошибки
Ловушки Code splitting: обёртка каждого компонента в React.memo "для производительности" (стоимость сравнений суммируется — мемоизируйте только листья часто ререндерящихся деревьев); мемоизация значений с дешёвым compute (оверхед больше выгоды); большой бандл без code splitting (медленный TTI); оптимизация без замеров (чините не то). Источник истины — вкладка Profiler в React DevTools.