Оптимизация ассетов

Haunted — это небольшая библиотека для создания веб-компонентов с реактивным рендерингом, построенная поверх стандарта Web Components. Главная цель Haunted — дать возможность управлять состоянием компонентов через хуки, аналогично React, но без необходимости подключать целый фреймворк.

Ключевой принцип работы Haunted — реактивные функции, которые автоматически вызываются при изменении состояния. Это достигается с помощью хука useState, который возвращает текущее значение и функцию для его обновления:

import { html, component, useState } from 'haunted';

function Counter() {
  const [count, setCount] = useState(0);

  return html`
    <div>
      <p>Счетчик: ${count}</p>
      <button @click=${() => setCount(count + 1)}>Увеличить</button>
    </div>
  `;
}

customElements.define('my-counter', component(Counter));

В этом примере каждое обновление состояния вызывает повторный рендер компонента, сохраняя при этом минимальные затраты на DOM-операции.

Оптимизация рендеринга

Haunted использует lit-html для шаблонов, что позволяет эффективно обновлять только изменившиеся части DOM. Основные моменты оптимизации:

  • Минимизация перерисовок: избегать вызовов setState без необходимости. Каждое изменение состояния запускает повторный рендер.
  • Мемоизация вычислений: при сложной логике внутри шаблонов стоит использовать useMemo или вычислять данные вне шаблона.
  • Использование ключей для списков: при рендеринге массивов элементов рекомендуется добавлять уникальный key, чтобы Haunted правильно сопоставлял элементы и не пересоздавал их полностью.
function ItemList({ items }) {
  return html`
    <ul>
      ${items.map(item => html`<li key=${item.id}>${item.name}</li>`)}
    </ul>
  `;
}

Работа с состоянием

Haunted предоставляет несколько хуков для управления состоянием и эффектами:

  • useState(initialValue) — хранение и обновление локального состояния.
  • useReducer(reducer, initialState) — для сложных состояний с логикой изменений, аналог Redux внутри компонента.
  • useEffect(callback, dependencies) — выполнение побочных эффектов при изменении зависимостей.

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

Оптимизация ассетов

В веб-приложениях Haunted, как и в других SPA, ключевой фактор скорости — это размер и количество загружаемых ресурсов. Рекомендации:

  1. Динамический импорт компонентов: использовать import() для ленивой загрузки.
const loadChart = async () => {
  const module = await import('./chart-component.js');
  return module.default;
};
  1. Разделение кода (code splitting): делить крупные компоненты на маленькие, чтобы браузер загружал только необходимые части.
  2. Минификация и сжатие: использовать инструменты типа Rollup или Vite для минификации JS и CSS.
  3. Оптимизация изображений и статических файлов: webp вместо png/jpg, lazy loading для больших изображений.

Эффективные шаблоны и рендеринг

Для уменьшения нагрузки на DOM рекомендуется:

  • Использовать условный рендеринг вместо полного скрытия элементов через CSS.
const isVisible = true;
html`${isVisible ? html`<p>Видимый текст</p>` : ''}`
  • Фрагменты и вложенные шаблоны позволяют избегать лишних <div> и упрощают структуру DOM.
  • Компоненты как функции: небольшие, независимые компоненты легче повторно использовать и рендерить.

Сравнение с React

Haunted отличается минимальным размером и прямым использованием Web Components. Ключевые преимущества в плане оптимизации:

  • Нет виртуального DOM, обновления напрямую через lit-html.
  • Меньше накладных расходов на инициализацию и рендеринг.
  • Полная совместимость с нативными браузерными стандартами, что позволяет использовать стандартные методы оптимизации ассетов.

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

Практические советы

  • Разбивать приложение на маленькие компоненты и подкомпоненты.
  • Хранить минимальное количество состояний в каждом компоненте.
  • Выносить вычисления из шаблонов, использовать мемоизацию.
  • Использовать динамический импорт и ленивую загрузку больших модулей.
  • Минимизировать размер CSS и JS, оптимизировать ассеты.

Haunted позволяет строить реактивные, компактные и быстрые веб-приложения при строгом соблюдении принципов оптимизации рендеринга и ассетов.

Оглавление