CDN и статические хостинги

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

Для подключения через CDN достаточно добавить тег <script> в HTML-файл:

<script src="https://unpkg.com/mithril/mithril.js"></script>

Альтернативно можно использовать другие популярные CDN, такие как jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/mithril/mithril.js"></script>

После подключения глобальная переменная m становится доступной для создания компонентов, маршрутов и виртуального DOM.

Структура приложения с Mithril

Mithril не навязывает строгую структуру проекта, однако при использовании статических хостингов и CDN стоит организовать файлы так, чтобы HTML, CSS и JS были разделены. Пример базовой структуры:

/project
  index.html
  /js
    app.js
  /css
    style.css

В index.html подключаются стили и скрипты:

<link rel="stylesheet" href="css/style.css">
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="js/app.js"></script>

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

var Hello = {
    view: function() {
        return m("h1", "Привет, Mithril!");
    }
};

m.mount(document.body, Hello);

m.mount отвечает за привязку компонента к указанному DOM-элементу. В данном примере компонент монтируется на весь <body>.

Работа с маршрутизацией

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

var Home = {
    view: function() { return m("div", "Главная страница"); }
};

var About = {
    view: function() { return m("div", "О приложении"); }
};

m.route(document.body, "/", {
    "/": Home,
    "/about": About
});

Ключевой момент: при размещении на статическом хостинге сервер не обрабатывает маршруты, поэтому необходимо настроить перенаправление всех запросов на index.html. Например, для Netlify используется файл _redirects:

/* /index.html 200

Для GitHub Pages достаточно корректно настроить базовый путь и ссылки внутри приложения.

Организация кода для CDN

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

var App = (function() {
    var Component = {
        view: function() {
            return m("p", "Модульный компонент");
        }
    };
    return {
        Component: Component
    };
})();

Такой подход позволяет избегать загрязнения глобального пространства имен, сохраняя совместимость с подключением через <script>.

Использование статики и кеширования

При развертывании на статическом хостинге важно учитывать кеширование файлов. Для JS и CSS рекомендуется использовать:

  • Версионирование файлов: app.v1.0.0.js
  • Заголовки Cache-Control для CDN или хостинга

Это позволяет обновлять приложение без риска, что пользователи увидят устаревший код.

Интеграция с CSS и другими ресурсами

Mithril не включает встроенные средства для работы со стилями, поэтому подключение CSS осуществляется стандартно через <link> или inline-стили в компоненте:

var Styled = {
    view: function() {
        return m("div", {style: {color: "blue", fontWeight: "bold"}}, "Синий текст");
    }
};

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

Автоматизация сборки для статических хостингов

Хотя использование CDN упрощает старт, для больших проектов часто применяют простую сборку:

  • Минификация JS и CSS с помощью инструментов типа esbuild или terser
  • Конкатенация файлов для уменьшения числа запросов
  • Автогенерация версии файла для кеширования

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

Примеры хостингов

  1. GitHub Pages – бесплатный вариант, легко интегрируется с репозиторием. Поддерживает статические ресурсы, но маршрутизация требует настройки <base> или работы через hash-ссылки (m.route.prefix = "#")
  2. Netlify – гибкая конфигурация, поддержка _redirects для SPA, автоматическое SSL и CI/CD
  3. Vercel – простое развёртывание, поддержка статических сайтов и серверных функций при необходимости

Правильная организация файлов и использование CDN позволяет создавать лёгкие и быстрые приложения на Mithril без сложной сборки.

Оглавление