Dynamic imports стратегии

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

Основы динамических импортов

В JavaScript динамический импорт реализуется с помощью функции import(), которая возвращает промис. В контексте Stencil это позволяет загружать компоненты только тогда, когда они действительно требуются:

const modulePromise = import('./my-component');
modulePromise.then((module) => {
  module.MyComponent.doSomething();
});

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

Применение в веб-компонентах

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

import { Component, h, State } from '@stencil/core';

@Component({
  tag: 'lazy-loader',
  styleUrl: 'lazy-loader.css',
  shadow: true
})
export class LazyLoader {
  @State() LoadedComponent: any = null;

  async loadComponent() {
    const module = await import('./heavy-component');
    this.LoadedComponent = module.HeavyComponent;
  }

  render() {
    return (
      <div>
        <button onCl ick={() => this.loadComponent()}>Загрузить компонент</button>
        {this.LoadedComponent && <this.LoadedComponent />}
      </div>
    );
  }
}

В этом примере компонент HeavyComponent загружается только при нажатии на кнопку, снижая первоначальную нагрузку на страницу.

Стратегии ленивой загрузки

Ленивая загрузка по событию Компонент подгружается при взаимодействии пользователя, как в примере выше. Это подходит для редко используемых функций или модальных окон.
Ленивая загрузка по маршруту (Route-based) Для приложений на Stencil с использованием stencil-router можно подгружать компоненты только для конкретного маршрута:

<Route url='/dashboard' component={() => import('./dashboard-component').then(m => m.DashboardComponent)} />

Это позволяет разбивать приложение на «страницы», каждая из которых загружается по мере необходимости.

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

if (userIsLoggedIn) {
  import('./user-dashboard').then(m => m.UserDashboard);
}

Предзагрузка (Preloading) Иногда требуется подгрузить компонент заранее, но без блокировки рендеринга. В Stencil это можно сделать с помощью link rel="preload" или вызова import() в componentWillLoad, не рендеря компонент сразу.

Оптимизация бандлов

Code splitting — разбиение кода на отдельные чанки для снижения размера основного бандла.
Встроенные динамические импорты Stencil — Stencil автоматически разбивает бандл на отдельные части при использовании import() внутри компонентов.
Селективная подгрузка зависимостей — импортируются только необходимые модули, что снижает нагрузку на сеть и ускоряет первую отрисовку.

Особенности использования с Shadow DOM

При использовании Shadow DOM динамическая подгрузка не требует специальных изменений, но следует учитывать, что стили могут подгружаться отдельно. В Stencil это решается с помощью styleUrl внутри компонента, который гарантирует корректное применение CSS после загрузки компонента.

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

Комбинирование нескольких стратегий динамических импортов позволяет создавать гибкие приложения:

Ленивая загрузка компонентов при клике
Предзагрузка часто используемых компонентов в фоне
Route-based загрузка для SPA-приложений
Условная загрузка для разных типов пользователей

async function loadFeatures(userRole: string) {
  if (userRole === 'admin') {
    const module = await import('./admin-panel');
    return module.AdminPanel;
  } else {
    const module = await import('./user-panel');
    return module.UserPanel;
  }
}