Ленивая загрузка шаблонов

Ленивая загрузка шаблонов в FAST Element позволяет создавать веб-компоненты, которые инициализируются только тогда, когда это действительно необходимо. Такой подход уменьшает время первоначальной загрузки страницы и снижает нагрузку на браузер при большом количестве компонентов. В FAST Element ключевым элементом является механизм template и функция html, позволяющая создавать шаблоны декларативно.

Динамическое создание шаблонов

FAST Element использует Tagged Template Literals для описания разметки компонента. Стандартная практика выглядит так:

import { FASTElement, html, css } from "@microsoft/fast-element";

const template = html<MyComponent>`
  <div class="container">
    <h1>${x => x.title}</h1>
    <p>${x => x.description}</p>
  </div>
`;

const styles = css`
  .container {
    padding: 16px;
    border: 1px solid #ccc;
  }
`;

При ленивой загрузке шаблон не создается сразу. Вместо этого используется функция, возвращающая шаблон только при необходимости:

const lazyTemplate = () => html<MyComponent>`
  <div class="container">
    <h1>${x => x.title}</h1>
    <p>${x => x.description}</p>
  </div>
`;

Вызов lazyTemplate() происходит только тогда, когда компонент реально добавляется в DOM, что экономит ресурсы и уменьшает объем рантайма.

Регистрация компонента с ленивым шаблоном

В FAST Element компонент регистрируется через FASTElement.define или с помощью customElements.define. Для ленивой загрузки шаблона регистрация может использовать динамический импорт:

class MyComponent extends FASTElement {
  title = "Пример ленивого компонента";
  description = "Этот шаблон создается только при первом рендере";
}

customElements.define(
  "my-component",
  class extends MyComponent {
    constructor() {
      super();
      import("./lazy-template.js").then(module => {
        this.template = module.lazyTemplate();
        this.$fastController = this.$fastController || this.connect();
      });
    }
  }
);

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

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

FAST Element полностью поддерживает Shadow DOM, что делает ленивую загрузку особенно эффективной для изолированных компонентов. При использовании attachShadow({mode: "open"}) шаблон подключается только при вызове функции lazyTemplate().

class LazyShadowComponent extends FASTElement {
  connectedCallback() {
    super.connectedCallback();
    import("./shadow-template.js").then(module => {
      this.shadowRoot.innerHTML = "";
      this.shadowRoot.appendChild(module.lazyTemplate().create());
    });
  }
}
customElements.define("lazy-shadow-component", LazyShadowComponent);

Использование Shadow DOM с ленивой загрузкой уменьшает количество ререндеров глобального DOM и предотвращает ненужное потребление ресурсов.

Взаимодействие с состоянием и реактивностью

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

class LazyReactiveComponent extends FASTElement {
  static properties = {
    title: { type: String },
    description: { type: String }
  };

  connectedCallback() {
    super.connectedCallback();
    import("./reactive-template.js").then(module => {
      this.template = module.lazyTemplate();
      this.$fastController = this.$fastController || this.connect();
    });
  }
}

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

Оптимизация производительности

  1. Деление кода: Вынос шаблонов в отдельные модули уменьшает размер основного бандла.
  2. Отложенная инициализация: Компоненты подключаются только при взаимодействии пользователя или попадании в видимую область.
  3. Кэширование шаблонов: После первого вызова lazyTemplate() результат можно сохранить, чтобы при последующих рендерах не создавать новый экземпляр.
let cachedTemplate = null;

const lazyCachedTemplate = () => {
  if (!cachedTemplate) {
    cachedTemplate = html<MyComponent>`
      <div>${x => x.title}</div>
    `;
  }
  return cachedTemplate;
};

Поддержка асинхронных ресурсов

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

class AsyncComponent extends FASTElement {
  async connectedCallback() {
    super.connectedCallback();
    const module = await import("./async-template.js");
    this.template = module.lazyTemplate();
    await fetch("/api/data")
      .then(res => res.json())
      .then(data => {
        this.data = data;
        this.$fastController.update();
      });
  }
}

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

Использование с маршрутизацией

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

import { Router } from "some-router-library";

Router.addRoute("/dashboard", async () => {
  const module = await import("./dashboard-component.js");
  return module.lazyTemplate();
});

Итоговые рекомендации

  • Выносить большие шаблоны и стили в отдельные модули.
  • Использовать функции для ленивой генерации шаблонов.
  • Кэшировать шаблоны после первого вызова.
  • Комбинировать ленивую загрузку с Shadow DOM для изоляции компонентов.
  • Сохранять реактивность свойств, даже если шаблон загружается асинхронно.

Ленивая загрузка шаблонов в FAST Element позволяет строить масштабируемые приложения с оптимизированной производительностью и меньшей нагрузкой на браузер.

Оглавление