CDN конфигурация

CDN (Content Delivery Network) используется для быстрой и эффективной доставки статических ресурсов приложений, созданных на Stencil. В контексте Stencil это особенно актуально для Web Components, поскольку их можно распространять как отдельные модули без привязки к конкретному фреймворку.

Настройка сборки для CDN

Stencil предоставляет гибкую систему сборки через stencil.config.ts, где можно настроить оптимизированные пути к статическим ресурсам. Основной параметр для конфигурации CDN — outputTargets. Пример базовой настройки для публикации на CDN:

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'mycomponents',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'www',
      serviceWorker: null,
      baseUrl: 'https://cdn.example.com/mycomponents/',
    },
  ],
};

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

  • baseUrl указывает на корень CDN, где будут доступны файлы сборки.
  • esmLoaderPath важен для правильной загрузки модулей ES при использовании CDN.

Использование CDN-версии компонентов

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

  • type=“module” — современный браузер загрузит ES-модули.
  • nomodule — fallback для старых браузеров, которые не поддерживают ES-модули.

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

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

При использовании CDN важно минимизировать размер и количество запросов. Для этого в stencil.config.ts можно включить следующие опции:

buildEs5: true,
minifyJs: true,
minifyCss: true,
  • buildEs5: true — создаёт совместимую с ES5 версию для старых браузеров.
  • minifyJs и minifyCss — минимизация кода для ускорения загрузки.

Кроме того, Stencil поддерживает lazy-loading компонентов, что позволяет загружать только те модули, которые реально используются на странице. Настройка выполняется через outputTargets с указанием lazy:

outputTargets: [
  {
    type: 'dist',
    esmLoaderPath: '../loader',
    copy: [
      { src: '**/*.css' },
      { src: '**/*.png' }
    ],
  },
  {
    type: 'www',
    serviceWorker: null,
    baseUrl: 'https://cdn.example.com/mycomponents/',
    dir: 'www',
  },
]

Работа с версионностью

Для удобства обновления компонентов через CDN рекомендуется включать версионные пути:

https://cdn.example.com/mycomponents/v1.0.0/mycomponents.esm.js

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

Кэширование и headers

CDN обычно предоставляет механизмы контроля кэширования через HTTP-заголовки. Для компонентов Stencil полезно включать:

  • Cache-Control: max-age=31536000, immutable — для неизменяемых версий.
  • ETag — для проверки актуальности файлов.

Такая конфигурация снижает нагрузку на сервер и ускоряет доставку компонентов пользователям.

Поддержка SSR и интеграция с другими фреймворками

CDN-версии компонентов легко интегрируются с серверным рендерингом (SSR) и популярными фреймворками (React, Angular, Vue) через адаптеры. Важно, чтобы baseUrl совпадал с фактическим расположением скриптов на CDN, иначе динамическая загрузка модулей не сработает.

Оглавление