Ленивая загрузка

Ленивая загрузка (lazy loading) в Atomico позволяет оптимизировать производительность приложения, разделяя код на части и загружая компоненты только по мере необходимости. Это особенно актуально для крупных приложений, где полная загрузка всех компонентов на старте приводит к увеличению времени первого рендера.

Импорт компонентов с помощью lazy

В Atomico ленивую загрузку компонентов реализует функция lazy. Она принимает функцию, возвращающую промис с импортом компонента:

import { h, lazy } from "atomico";

const LazyComponent = lazy(() => import("./LazyComponent"));

В этом примере LazyComponent не загружается при старте приложения. Он подгружается только в момент рендера.

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

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

import { h, Suspense } from "atomico";

function App() {
    return (
        <Suspense fallback={<div>Загрузка...</div>}>
            <LazyComponent />
        </Suspense>
    );
}

Ключевой момент: fallback отображается до завершения загрузки компонента. Это может быть любой JSX: индикаторы загрузки, скелетоны или текстовые уведомления.

Ленивые страницы и маршрутизация

В крупных SPA ленивые компоненты часто используются совместно с маршрутизаторами. Пример интеграции с atomico-router:

import { h, lazy } from "atomico";
import { Router, Route } from "atomico-router";

const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));

function App() {
    return (
        <Router>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
        </Router>
    );
}

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

Условная ленивость

Ленивый компонент можно загружать условно, только когда определённое состояние или событие выполняется:

import { h, lazy, useState } from "atomico";

const LazyWidget = lazy(() => import("./LazyWidget"));

function Dashboard() {
    const [showWidget, setShowWidget] = useState(false);

    return (
        <div>
            <button onCl ick={() => setShowWidget(true)}>Показать виджет</button>
            {showWidget && (
                <Suspense fallback={<div>Загрузка виджета...</div>}>
                    <LazyWidget />
                </Suspense>
            )}
        </div>
    );
}

Такой подход экономит ресурсы и ускоряет рендер основной части интерфейса.

Оптимизация загрузки

  1. Разделение кода по смыслу: каждый ленивый компонент должен представлять самостоятельный блок функционала.
  2. Минимизация зависимостей: ленивый компонент не должен импортировать большие модули, которые не нужны сразу.
  3. Предзагрузка (preload): при необходимости компоненты можно подгружать заранее через import() без рендера, чтобы сократить задержку при отображении:
const preloadComponent = () => import("./LazyComponent");
preloadComponent();

Особенности работы с Atomico

  • lazy возвращает компонент, совместимый с JSX и другими хуками Atomico.
  • Компоненты, загружаемые лениво, сохраняют реактивность и корректно обрабатывают свойства и события.
  • Поддерживается серверный рендеринг, но для него требуется учитывать асинхронность импорта.

Практические сценарии

  • Подгрузка крупных модулей интерфейса: редакторов, графиков, таблиц.
  • Отложенная загрузка страниц и разделов SPA.
  • Динамическая загрузка виджетов и всплывающих элементов.
  • Экономия памяти на мобильных устройствах за счёт минимизации стартового кода.

Ленивая загрузка в Atomico обеспечивает гибкость и контроль над производительностью, позволяя создавать быстрые и отзывчивые приложения без компромиссов в архитектуре.

Оглавление