Альтернативные сборки библиотеки

Библиотека Tippy.js предоставляет несколько вариантов сборок, которые отличаются по размеру, набору функций и зависимостям. Понимание этих альтернатив позволяет оптимизировать загрузку приложения и выбирать подходящий функционал для конкретной задачи. Основные типы сборок:

  1. UMD (Universal Module Definition) Предназначена для использования напрямую в браузере через <script> тег. Сборка включает все основные функции Tippy.js, совместима с CommonJS и AMD модулями. Подходит для проектов, где нет системы сборки модулей, таких как Webpack или Rollup.

  2. ESM (ECMAScript Modules) Современная модульная сборка, рассчитанная на импорт с помощью import. Поддерживает tree-shaking, что позволяет исключать неиспользуемые функции и снижать размер финального бандла. Часто применяется в проектах на Vue, React или Svelte, где используется сборка через Vite или Webpack.

  3. CJS (CommonJS) Используется в Node.js среде или в сборках, где требуется CommonJS синтаксис (require). Включает все функции Tippy.js и может быть интегрирована в серверные рендеринги, например, при генерации HTML на сервере.

Сборки без зависимостей: tippy.js vs tippy.js/dist/tippy-bundle.umd.min.js

Tippy.js использует Popper.js для позиционирования тултипов. Однако есть сборки, включающие Popper.js напрямую, и те, где Popper.js подключается отдельно:

  • tippy-bundle.umd.min.js Содержит встроенный Popper.js, готова к использованию сразу после подключения. Это удобно для проектов без менеджера пакетов, но увеличивает размер скрипта.

  • tippy.js (основная сборка) Не включает Popper.js, что позволяет подключать любую версию Popper.js отдельно. Дает больше гибкости и уменьшает размер бандла, если Popper.js уже используется в проекте.

Оптимизация сборок с tree-shaking

В ESM сборке можно выбирать только необходимые плагины Tippy.js. Например, если нужны только базовые тултипы без интерактивных модулей, можно импортировать только core:

import tippy from 'tippy.js/core';
import { followCursor } from 'tippy.js/plugins';

tippy('.tooltip', {
  content: 'Пример тултипа',
  plugins: [followCursor],
});

Такой подход уменьшает размер итогового скрипта и ускоряет загрузку страницы.

Использование минифицированных версий

Tippy.js предлагает минифицированные версии каждой сборки:

  • .min.js – минимизированная версия для продакшена, сжатие кода, удалены комментарии и пробелы.
  • .umd.js или .esm.js – неминифицированные версии для разработки и отладки, с сохранением читаемого кода и комментариев.

Выбор между ними зависит от стадии проекта: для разработки удобнее использовать неминифицированные версии, для продакшена — минифицированные.

Плагины и альтернативные сборки

Некоторые функции Tippy.js реализованы через плагины, что делает их доступными только в соответствующих сборках. Основные плагины:

  • followCursor – тултип следует за курсором.
  • inlinePositioning – поддержка позиционирования для inline-элементов.
  • sticky – позволяет тултипу «прилипать» к элементу при скролле.

Для уменьшения объема кода можно подключать только необходимые плагины через ESM сборку tippy.js/core, исключая ненужные функции.

Сравнительная таблица сборок

Сборка Размер Зависимости Поддержка модулей Использование
UMD bundle ~40 KB Встроенный Popper.js AMD, CommonJS, Быстрое подключение через браузер
ESM core ~15 KB Popper.js отдельно import/export Tree-shaking, минимальный бандл
CJS ~35 KB Popper.js отдельно require Node.js, SSR

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

UMD через <script>:

<script src="tippy-bundle.umd.min.js"></script>
<script>
  tippy('.tooltip', { content: 'Тултип' });
</script>

ESM через npm:

import tippy from 'tippy.js/core';
import 'tippy.js/dist/tippy.css';

tippy('.tooltip', { content: 'Тултип' });

CJS через Node.js:

const tippy = require('tippy.js').default;

tippy('.tooltip', { content: 'Тултип' });

Настройка сборок для продакшена

Для минимизации итогового размера и ускорения загрузки рекомендуется:

  1. Выбирать ESM сборку с tree-shaking.
  2. Подключать только необходимые плагины.
  3. Использовать минифицированные версии .min.js.
  4. Подключать CSS отдельно, чтобы стили загружались кэшируемыми файлами.

Эти методы позволяют создавать легкие, быстрые и гибкие реализации тултипов без лишних зависимостей.

Оглавление