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

Использование CDN (Content Delivery Network) позволяет быстро подключить библиотеку Universal Router без установки зависимостей через пакетные менеджеры. Такой подход удобен для прототипирования, тестирования и разработки небольших приложений.

Основные принципы подключения

CDN предоставляет готовую сборку библиотеки, размещённую на удалённом сервере. Подключение осуществляется через тег <script>, после чего API становится доступным в глобальной области видимости.

Ключевые особенности:

  • отсутствие этапа сборки проекта
  • мгновенное подключение
  • возможность работы в чистом JavaScript без инструментов вроде Webpack или Vite
  • ограниченный контроль над версией и зависимостями

Выбор CDN-провайдера

Наиболее распространённые CDN-сервисы:

  • unpkg
  • jsDelivr
  • cdnjs

Они автоматически подтягивают пакеты из npm-репозиториев и предоставляют доступ к различным версиям библиотек.

Подключение через <script>

Пример подключения Universal Router через jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/@uniswap/universal-router@latest/dist/index.min.js"></script>

Для фиксации версии рекомендуется указывать конкретный номер:

<script src="https://cdn.jsdelivr.net/npm/@uniswap/universal-router@1.2.0/dist/index.min.js"></script>

Это предотвращает неожиданные изменения API при обновлении библиотеки.

Проверка доступности библиотеки

После подключения библиотека обычно становится доступной через глобальный объект. В зависимости от сборки имя может отличаться.

Пример проверки:

console.log(window.UniversalRouter);

Если объект определён — библиотека успешно загружена.

Использование после подключения

Работа с Universal Router через CDN чаще всего предполагает использование уже скомпилированного интерфейса.

Пример инициализации:

const router = new UniversalRouter({
  provider: window.ethereum
});

Далее можно вызывать методы маршрутизации транзакций:

router.execute({
  commands: [...],
  inputs: [...]
});

Асинхронная загрузка

Для повышения производительности страницы рекомендуется использовать атрибуты defer или async.

<script defer src="https://cdn.jsdelivr.net/npm/@uniswap/universal-router@1.2.0/dist/index.min.js"></script>

Различия:

  • async — загружает и выполняет скрипт сразу после загрузки
  • defer — откладывает выполнение до полной загрузки HTML

Для библиотек чаще предпочтителен defer.

Работа с зависимостями

Universal Router может зависеть от других библиотек, например:

  • ethers.js
  • web3.js

Их также необходимо подключать через CDN:

<script src="https://cdn.jsdelivr.net/npm/ethers@6.0.0/dist/ethers.umd.min.js"></script>

Порядок подключения имеет значение:

  1. Сначала зависимости
  2. Затем Universal Router

Обработка ошибок загрузки

CDN-загрузка может завершиться неудачно. Для отслеживания ошибок используется обработчик:

<script src="..." oner ror="handleError()"></script>

Пример:

function handleError() {
  console.error('Не удалось загрузить Universal Router');
}

Кэширование и производительность

CDN автоматически использует:

  • географически распределённые серверы
  • кэширование на стороне браузера

Это снижает задержки и ускоряет загрузку.

Однако при обновлении версии может потребоваться очистка кэша:

location.reload(true);

Ограничения CDN-подхода

Использование CDN имеет ряд ограничений:

  • отсутствие tree-shaking
  • невозможность гибкой настройки сборки
  • повышенные риски при использовании latest версии
  • сложность интеграции с современными фреймворками

Практический пример HTML-страницы

<!DOCTYPE html>
<html>
<head>
  <title>Universal Router CDN</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/ethers@6.0.0/dist/ethers.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@uniswap/universal-router@1.2.0/dist/index.min.js"></script>

<script>
  async function init() {
    if (!window.ethereum) {
      console.error('MetaMask не найден');
      return;
    }

    const provider = new ethers.BrowserProvider(window.ethereum);
    
    const router = new UniversalRouter({
      provider: provider
    });

    console.log('Router инициализирован:', router);
  }

  init();
</script>

</body>
</html>

Когда использовать CDN

Подход оправдан в следующих случаях:

  • быстрые демонстрации
  • образовательные примеры
  • прототипирование интерфейсов
  • тестирование API

Для production-решений чаще применяется установка через npm с последующей сборкой проекта.

Оглавление