Перейти к основному содержимому

Code Splitting и entry points

Общие правила​

MUST​

  • Разделение по маршрутам — обязательное.
  • Код, не влияющий на первый экран, грузится асинхронно.
  • Критический UI не зависит от асинхронных чанков.

FORBIDDEN​

  • Загружать весь код приложения в стартовый бандл.
  • Держать бизнес-логику в entry points.

Entry points и универсальный код​

MUST​

  • Entry points используются только для:
    • инициализации
    • композиции
    • dependency injection

SHOULD​

  • Общий код минимален и не содержит бизнес-логики.

Next.js (Pages Router)​

Пример: динамический импорт компонента​

import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('../components/heavy-chart'), {
  loading: () => <ChartSkeleton />,
  ssr: false
});

export default function AnalyticsPage() {
  return <HeavyChart />;
}

Пример: page-specific логика​

// pages/reports.tsx
import { ReportsPage } from '@/features/reports';

export default function Reports() {
  return <ReportsPage />;
}

Next.js (App Router)​

Пример: разделение по маршрутам​

app/
  dashboard/page.tsx
  settings/page.tsx

Пример: динамический импорт с client boundary​

// app/dashboard/page.tsx (Server Component)
import dynamic from 'next/dynamic';

const RealtimeWidget = dynamic(() => import('./realtime-widget'), {
  loading: () => <WidgetSkeleton />
});

export default function DashboardPage() {
  return <RealtimeWidget />;
}

Astro​

Astro по умолчанию отдает HTML и грузит JS только для островов.

Пример: остров с отложенной инициализацией​

---
import Reviews from '../components/Reviews.jsx';
---

<Reviews client:idle />

Пример: загрузка при видимости​

<Chart client:visible />

Диаграмма: маршруты и чанки​

Контроль зависимостей​

SHOULD​

  • Анализировать крупные или неиспользуемые зависимости.
  • Удалять дубли и тяжелые библиотеки.

Инструменты​

  • webpack-bundle-analyzer
  • source-map-explorer
  • rollup-plugin-visualizer

Процедуры контроля (Code Review)​

Ревьюер должен убедиться, что:​

  • код разделен по маршрутам
  • entry points не содержат бизнес-логики
  • тяжелые компоненты загружаются асинхронно
  • общий бандл минимален