Frontend Academy · Урок

Разделение кода и ленивые маршруты

«Разделение кода и ленивые маршруты» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Зачем разделять код

Монолитный пакет JavaScript заставляет каждого посетителя загружать каждую строку кода приложения, даже если пользователь никогда не использует соответствующие функции. Разделение кода разбивает пакет на фрагменты, загружаемые по требованию.

Динамический import()

import('./module') возвращает Promise, который разрешается в модуль. Сборщики (Vite, webpack) распознают это и создают отдельный фрагмент, загружаемый во время выполнения.

// Without split — entire heavy lib in main bundle:
import { generateChart } from 'heavy-chart-lib';

// With split — loaded only when needed:
button.addEventListener('click', async () => {
  const { generateChart } = await import('heavy-chart-lib');
  generateChart(data);
});

React.lazy() — разделение на уровне компонентов

React.lazy(() => import('./Heavy')) создаёт компонент, который загружает свой код только при первой отрисовке. Оберните его в <Suspense>, чтобы показывать резервный вариант во время загрузки.

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

Разделение по маршрутам в React Router

Каждый маршрут получает собственный фрагмент, поэтому пользователи загружают только код посещаемых ими страниц.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

const router = createBrowserRouter([
  { path: '/',        element: <Suspense fallback={<Spinner/>}><Home /></Suspense> },
  { path: '/profile', element: <Suspense fallback={<Spinner/>}><Profile /></Suspense> },
  { path: '/admin',   element: <Suspense fallback={<Spinner/>}><Admin /></Suspense> }
]);

Асинхронные компоненты Vue 3

Vue предоставляет defineAsyncComponent для реализации того же подхода.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(() =>
  import('./Dashboard.vue')
);

// Use in template like a normal component

Отложенные маршруты Vue Router

Vue Router поддерживает динамические импорты в определениях маршрутов, поэтому для каждого маршрута создаются отдельные фрагменты.

const routes = [
  { path: '/',        component: () => import('./pages/Home.vue') },
  { path: '/profile', component: () => import('./pages/Profile.vue') },
  { path: '/admin',   component: () => import('./pages/Admin.vue') }
];

Магические комментарии webpack

Указывайте имена фрагментов и поведение предварительной загрузки с помощью «магических комментариев» webpack внутри оператора импорта.

const Profile = lazy(() =>
  import(/* webpackChunkName: "profile", webpackPrefetch: true */ './Profile')
);

// Vite supports a subset; @vite-ignore for special cases

Предварительная загрузка и загрузка с высоким приоритетом

prefetch: загружает фрагмент в период простоя для вероятных следующих переходов. preload: немедленно загружает фрагмент с высоким приоритетом для критически важных фрагментов текущего маршрута. Используйте prefetch при наведении на ссылку, а preload — для известных ближайших потребностей.

Анализатор пакетов

Используйте rollup-plugin-visualizer (Vite) или webpack-bundle-analyzer, чтобы визуализировать размеры фрагментов. Ищите слишком крупные фрагменты, дублирующиеся зависимости и библиотеки, для которых вы забыли выполнить удаление неиспользуемого кода.

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [visualizer({ open: true, gzipSize: true })]
};

Разделение фрагментов сторонних библиотек

Выносите сторонние библиотеки в отдельный фрагмент, который меняется реже, чем код приложения. Так браузеры смогут сохранять его в кэше между развёртываниями.

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-tooltip']
        }
      }
    }
  }
};

Когда НЕ следует разделять код

Маленькие фрагменты (менее 20 КБ) скорее вредят, чем помогают: накладные расходы HTTP превышают экономию от уменьшения пакета. Не разделяйте каждый компонент; выполняйте разделение на границах маршрутов и вокруг действительно тяжёлых функций.

Быстрая проверка

С чем нужно сочетать оболочку lazy() из React, чтобы она корректно отрисовывалась?

Итоги: разделение кода

Динамический import() создаёт отдельные фрагменты. Используйте React.lazy вместе с Suspense для разделения компонентов. Применяйте отложенную загрузку компонентов маршрутов в React Router и Vue Router. Используйте prefetch для вероятных следующих фрагментов, а preload — для критически важных. Анализатор пакетов помогает обнаружить потери. Выносите сторонние библиотеки в отдельные фрагменты для эффективного кэширования. Избегайте микрофрагментов размером менее 20 КБ.

Часто задаваемые вопросы

Урок «Разделение кода и ленивые маршруты» бесплатный?

Да — полный текст урока «Разделение кода и ленивые маршруты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Разделение кода и ленивые маршруты»?

Используйте динамический import(), чтобы разделять сборку на границах маршрутов, лениво загружайте компоненты React и Vue и отслеживайте размеры фрагментов в результате сборки. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Разделение кода и ленивые маршруты»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Основные веб-показатели: LCP, FID и CLS
Аудиты и оценка Lighthouse
Оптимизация изображений: ленивая загрузка и формат WebP
Разделение кода и ленивые маршруты

← Назад к Frontend Academy