CDN и статические ресурсы

Preact предоставляет возможность быстрого подключения без установки через npm, используя CDN. Основное преимущество такого подхода — мгновенное тестирование и прототипирование без настройки сборщика.

Для подключения базовой библиотеки используется тег <script> с указанием URL на актуальную версию:

<script src="https://unpkg.com/preact@latest/dist/preact.min.js"></script>

В современных приложениях часто используют также пакет preact/hooks для работы с хуками:

<script src="https://unpkg.com/preact@latest/hooks/dist/hooks.umd.js"></script>

Важно подключать скрипты в правильном порядке: сначала preact, затем preact/hooks, если планируется использование функциональных компонентов с хуками.

Структура проекта с CDN

Использование CDN позволяет организовать проект без сложной сборки. Типичная структура может выглядеть так:

project/
│
├─ index.html
├─ main.js
└─ styles/
   └─ style.css

Файл index.html содержит подключение CDN и собственный скрипт:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Preact CDN Example</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/preact@latest/dist/preact.min.js"></script>
    <script src="https://unpkg.com/preact@latest/hooks/dist/hooks.umd.js"></script>
    <script src="main.js"></script>
</body>
</html>

В main.js создаются компоненты и рендерится приложение:

const { h, render } = preact;
const { useState } = preactHooks;

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

    return h('div', null,
        h('h1', null, `Счётчик: ${count}`),
        h('button', { onClick: () => setCount(count + 1) }, 'Увеличить')
    );
}

render(h(Counter), document.getElementById('app'));

Подключение статических ресурсов

Preact через CDN работает с обычными статическими файлами — CSS, изображениями, шрифтами. Рекомендуется хранить их в отдельных папках (styles, images, fonts) и подключать через относительные пути:

<link rel="stylesheet" href="styles/style.css">
<img src="images/logo.png" alt="Logo">

Для корректной работы с изображениями внутри компонентов:

function Logo() {
    return h('img', { src: 'images/logo.png', alt: 'Логотип' });
}

При использовании CDN важно помнить о кэшировании. Скрипты и стили, подключённые с CDN, часто кэшируются браузером, поэтому при обновлении версии необходимо корректно указывать новый URL или использовать query-параметры:

<script src="https://unpkg.com/preact@latest/dist/preact.min.js?version=10.6.5"></script>

Особенности работы с компонентами

CDN позволяет использовать как классовые, так и функциональные компоненты. На практике чаще применяются функциональные компоненты с хуками из preact/hooks, что упрощает управление состоянием:

function TodoList() {
    const [items, setItems] = useState(['Купить хлеб', 'Выучить Preact']);
    
    const addItem = () => setItems([...items, 'Новая задача']);

    return h('div', null,
        h('ul', null, items.map(item => h('li', null, item))),
        h('button', { onClick: addItem }, 'Добавить')
    );
}

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

Использование CDN снижает нагрузку на сборку проекта, но при масштабных приложениях стоит учитывать:

  • Задержку загрузки: скрипты с CDN подгружаются через сеть, поэтому важен быстрый CDN с низкой латентностью.
  • Версионность: фиксирование версии библиотеки предотвращает несовместимости при автоматическом обновлении CDN.
  • Кэширование: подключение через integrity и crossorigin повышает безопасность и стабильность:
<script src="https://unpkg.com/preact@10.6.5/dist/preact.min.js"
        integrity="sha384-xxxxxx"
        crossorigin="anonymous"></script>

Итоговые рекомендации по работе с CDN и статическими ресурсами

  • Разделять библиотеки и собственный код: CDN для внешних зависимостей, локальные файлы для проекта.
  • Организовывать статические ресурсы по папкам для удобства и читаемости.
  • Использовать хуки для функциональных компонентов, обеспечивая компактность кода и лёгкое управление состоянием.
  • Контролировать версии и кэширование CDN для предотвращения проблем с обновлением библиотек.

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

Оглавление