CDN и кэширование

Haunted — это современная библиотека для создания веб-компонентов с использованием функционального подхода, основанного на хуках, аналогичных React. Она распространяется в виде модулей JavaScript, которые можно подключать через NPM или через CDN. Подключение через CDN позволяет быстро интегрировать библиотеку в проект без установки через пакетный менеджер.

Подключение через CDN

Haunted предоставляет официальные сборки, доступные через CDN, такие как Skypack и unpkg. Основные варианты подключения:

<script type="module">
  import { html, component, useState } from 'https://cdn.skypack.dev/haunted';
</script>

Или через unpkg с указанием конкретной версии:

<script type="module">
  import { html, component, useState } from 'https://unpkg.com/haunted@6.0.1?module';
</script>

Ключевые моменты:

Используется type="module", что позволяет использовать ES-модули напрямую в браузере.
Указание версии через @6.0.1 важно для стабильности и предотвращения неожиданных изменений API.
Поддерживаются все основные функции Haunted: html, component, хуки (useState, useEffect, useReducer и др.).

Управление кэшированием

CDN автоматически кеширует файлы, что снижает нагрузку на сервер и ускоряет загрузку страниц. Однако поведение кэша можно контролировать через URL и HTTP-заголовки.

Фиксация версии Использование точной версии (@6.0.1) гарантирует, что при повторной загрузке страницы браузер возьмет именно этот файл из кэша, а не последнюю версию, которая может содержать несовместимые изменения.
Query-параметры Можно добавлять query-параметры для принудительного обновления кэша:

<script type="module">
  import { html } from 'https://cdn.skypack.dev/haunted?module&cachebust=20260117';
</script>

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

HTTP-заголовки На стороне CDN обычно выставляются заголовки Cache-Control и ETag. Это позволяет браузеру проверять актуальность файла и загружать его только при изменении. Для локального кэширования рекомендуется выбирать стабильную версию библиотеки, чтобы минимизировать количество запросов.

Особенности использования CDN в продакшн

Производительность: Подключение через CDN сокращает время загрузки, так как файлы уже могут быть закешированы в сети пользователя.
Надёжность: Выбор популярных CDN снижает риск недоступности, но необходимо предусматривать резервный вариант на случай отказа основного источника.
Контроль версий: Для стабильных проектов фиксировать версию обязательно. Динамическая подгрузка последней версии может вызвать несовместимости.

Интеграция с системой сборки

Даже при использовании CDN в проекте с сборщиком (Webpack, Vite, Parcel) можно настроить внешние зависимости (externals), чтобы сборщик не включал Haunted в бандл, а оставлял её загрузку через CDN. Это уменьшает размер основного скрипта и ускоряет первичную загрузку страницы.

// Пример для Webpack
module.exports = {
  externals: {
    haunted: 'haunted'
  }
};

Кэширование динамических модулей

Haunted часто используется совместно с динамическим импортом:

const loadComponent = async () => {
  const { component, html } = await import('https://cdn.skypack.dev/haunted');
};

В этом случае браузер кеширует модуль автоматически. Для управления кэшем можно использовать query-параметры или версионирование динамических импортов.