Анализ размера бандла

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

<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css">
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

Базовая инициализация выглядит следующим образом:

tippy('#myButton', {
  content: 'Пример тултипа',
});

Этот код создаёт тултип для элемента с ID myButton. Важно отметить, что Tippy.js использует Popper.js для позиционирования, что позволяет точно управлять положением подсказок относительно элементов страницы.

Размер бандла Tippy.js

Размер бандла напрямую влияет на производительность и скорость загрузки страницы. Tippy.js поставляется в нескольких вариантах:

  1. Full bundle (tippy.umd.js) – включает все функции, Popper.js и все модули Tippy.js. Размер примерно 30–40 КБ минифицированного скрипта, без учета стилей. Этот вариант подходит для прототипов или проектов, где важна простота подключения.

  2. ES Modules (tippy.esm.js) – современный модульный вариант для сборщиков вроде Webpack, Vite, Parcel. Размер минифицированного модуля около 12–15 КБ, так как Popper.js можно подключить отдельно и включать только необходимые плагины.

  3. Core bundle (tippy.core.js) – минимальный вариант без встроенного Popper.js. Размер минифицированного файла около 6–8 КБ. Позволяет подключить Popper.js отдельно или использовать кастомное позиционирование, что снижает общий вес проекта.

  4. CSS – отдельный файл стилей (tippy.css) весит примерно 7–10 КБ минифицированным. Для проектов с кастомными стилями можно использовать только core JS, а стили подключить собственные.

Влияние дополнительных плагинов

Tippy.js поддерживает плагины, которые увеличивают размер бандла при их подключении:

  • followCursor – позволяет тултипу следовать за курсором, добавляет ~1–2 КБ.
  • animateFill – расширенная анимация подсказок, ~0.5 КБ.
  • inlinePositioning – улучшенное позиционирование для inline-элементов, ~0.5 КБ.
  • sticky – закрепление тултипа на месте при скролле, ~1 КБ.

Использование всех плагинов вместе с full bundle увеличивает размер скрипта примерно до 45 КБ минифицированного кода. Поэтому в крупных проектах рекомендуется подключать только необходимые модули и плагины через ES Modules.

Техника анализа размера бандла

Для анализа веса Tippy.js и его зависимостей используют несколько инструментов:

  1. Webpack Bundle Analyzer Позволяет визуально оценить долю Tippy.js и Popper.js в финальном бандле. В конфигурации Webpack достаточно добавить плагин:

    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

  2. Vite + Rollup Plugin Visualizer Для проектов на Vite или Rollup используют rollup-plugin-visualizer, который строит интерактивную карту размера бандлов и зависимостей.

  3. Source Map Explorer Позволяет изучить точный вес каждого модуля в итоговом бандле, включая плагины и зависимости Tippy.js:

    npx source-map-explorer dist/bundle.js

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

Минификация и tree-shaking

При использовании модульных версий (tippy.esm.js) включается tree-shaking, что позволяет удалить неиспользуемые плагины и уменьшить итоговый размер:

import tippy, { animateFill } from 'tippy.js';

tippy('#button', {
  content: 'Hello',
  plugins: [animateFill],
});

Если не подключать animateFill, соответствующий код не попадёт в бандл. Это особенно важно для больших приложений, где каждая лишняя функция добавляет килобайты.

Итоговые рекомендации по размеру бандла

  • Для легких сайтов или прототипов можно использовать full bundle с CDN.
  • Для производственных проектов лучше подключать ES Modules и минимальный набор плагинов.
  • CSS можно оптимизировать, используя только необходимые темы или кастомные стили.
  • Анализировать бандл стоит при каждом обновлении Tippy.js, так как новые версии могут включать дополнительные функции и увеличивать размер.

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

Оглавление