Lazy loading маршрутов

Lazy loading маршрутов — это техника оптимизации загрузки веб-приложений, при которой отдельные части приложения загружаются только по необходимости. В Preact это позволяет уменьшить первоначальный размер бандла и ускорить отображение критического контента. Основная идея заключается в динамическом импортировании компонентов маршрутов и их асинхронной подгрузке.

Динамический импорт компонентов

Для реализации ленивой загрузки используется стандартный синтаксис import(), возвращающий промис. Например:

import { h } from 'preact';
import { Suspense, lazy } from 'preact/compat';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
  • lazy() оборачивает функцию, которая возвращает промис от динамического импорта.
  • Компонент не загружается до первого рендеринга.
  • Это позволяет разбить приложение на отдельные чанки.

Использование Suspense

Suspense обеспечивает отображение резервного контента, пока ленивый компонент загружается:

<Suspense fallback={<div>Загрузка...</div>}>
  <Home />
</Suspense>
  • fallback может быть любой JSX-разметкой: спиннер, текст, анимация.
  • Suspense работает для всех ленивых компонентов внутри своей области видимости.
  • Важно: без Suspense ленивый компонент не будет рендериться корректно.

Ленивые маршруты с preact-router

Для маршрутизации в Preact часто используется библиотека preact-router. Ленивые компоненты маршрутов интегрируются следующим образом:

import { h } from 'preact';
import { Router } from 'preact-router';
import { Suspense, lazy } from 'preact/compat';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Suspense fallback={<div>Загрузка маршрута...</div>}>
    <Router>
      <Home path="/" />
      <About path="/about" />
    </Router>
  </Suspense>
);

export default App;
  • Каждый маршрут оборачивается в lazy().
  • Suspense охватывает весь роутер или отдельные маршруты, в зависимости от требований к UX.
  • Такой подход позволяет загружать маршруты только при переходе по конкретному пути.

Разделение кода и оптимизация бандла

Ленивая загрузка маршрутов создаёт отдельные чанки для каждого динамического импорта. Это снижает нагрузку на браузер и ускоряет первый рендеринг. Пример конфигурации с Webpack:

output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].js',
},
optimization: {
  splitChunks: {
    chunks: 'all',
  },
},
  • Каждый ленивый маршрут будет отдельным чанком.
  • Contenthash обеспечивает корректное кеширование при обновлении приложения.
  • В связке с Preact и preact/compat это один из самых эффективных способов ускорить загрузку.

Применение в больших приложениях

В крупных Preact-приложениях целесообразно:

  1. Делить маршруты по функциональным модулям (Dashboard, Profile, Settings).
  2. Использовать отдельный Suspense для каждой области приложения, где возможна долгосрочная загрузка.
  3. Добавлять предзагрузку маршрутов при наведении на ссылку, используя import().then() для улучшения UX.

Пример предзагрузки при наведении:

const AboutPreload = () => import('./routes/About');

<a
  href="/about"
  onMouseEn ter={() => AboutPreload()}
>
  О нас
</a>
  • Такой приём позволяет уменьшить задержку при переходе по маршруту.
  • Предзагрузка работает только для активных элементов интерфейса, минимизируя лишний трафик.

Ограничения и нюансы

  • Suspense в Preact полностью поддерживает ленивые компоненты, но не поддерживает асинхронные данные внутри самого компонента без сторонних библиотек.
  • Для SSR (Server-Side Rendering) требуется дополнительная настройка или использование специализированных пакетов (preact-iso или preact-ssr).
  • При неправильной конфигурации бандлов ленивые маршруты могут загружаться повторно, что увеличивает трафик и время ожидания.

Вывод

Lazy loading маршрутов в Preact позволяет уменьшить первоначальный размер бандла, ускорить первый рендеринг и улучшить UX при навигации. Основные инструменты — lazy() и Suspense, динамический импорт и грамотная разбивка кода. При интеграции с preact-router маршруты становятся полностью асинхронными, а предзагрузка маршрутов повышает отзывчивость интерфейса.

Оглавление