Встраивание ресурсов в base64

Встраивание ресурсов в base64 в сборке Rollup используется для уменьшения количества HTTP-запросов и объединения небольших ассетов непосредственно в JavaScript или CSS-бандл. Подход особенно актуален для иконок, небольших изображений, шрифтов и других статических файлов, размер которых оправдывает инлайнинг.

Основная идея заключается в преобразовании бинарных данных в строку base64 и включении этой строки в итоговый бандл. Браузер при этом декодирует ресурс на лету без отдельного сетевого запроса.

Принцип работы инлайнинга в Rollup

Rollup сам по себе не выполняет преобразование файлов в base64. Для этого используются плагины, чаще всего:

  • @rollup/plugin-url
  • альтернативные кастомные плагины обработки assets

Плагин перехватывает импорт файлов определённых типов и решает, нужно ли:

  • встроить файл как base64
  • либо вынести его в отдельный файл в выходную директорию

Решение принимается на основе порогового размера.

Базовая конфигурация через @rollup/plugin-url

Установка:

npm install @rollup/plugin-url --save-dev

Конфигурация Rollup:

import url fr om '@rollup/plugin-url';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    url({
      lim it: 10 * 1024,
      include: ['**/*.png', '**/*.jpg', '**/*.svg', '**/*.woff2'],
      emitFiles: true,
      fileName: '[name][hash][extname]'
    })
  ]
};

Логика параметра limit

Параметр limit определяет порог в байтах:

  • файл меньше лимита → преобразуется в base64 и встраивается
  • файл больше лимита → копируется в output как отдельный asset

Пример:

url({
  limit: 8 * 1024
});

В этом случае все файлы до 8 KB будут инлайнены.

Пример импорта изображения

import logo fr om './assets/logo.png';

const img = document.createElement('img');
img.src = logo;

document.body.appendChild(img);

Если файл попадает под лимит, переменная logo будет содержать строку вида:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

Формат Data URL

Результирующая строка base64 имеет структуру:

data:[<mime-type>][;base64],<data>

Пример:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov...

Mime-type определяется либо автоматически, либо через настройки плагина.

Обработка различных типов ресурсов

Изображения

Чаще всего инлайнятся:

  • PNG
  • JPG
  • SVG
  • GIF

SVG особенно эффективен для base64 из-за текстовой природы, хотя иногда предпочтительнее inline SVG без кодирования.

Шрифты

Поддерживаются форматы:

  • WOFF
  • WOFF2
  • TTF

Пример использования:

import fontUrl fr om './fonts/inter.woff2';

const style = document.createElement('style');
style.textContent = `
@font-face {
  font-family: 'Inter';
  src: url(${fontUrl}) format('woff2');
}
`;

document.head.appendChild(style);

Медиафайлы

Аудио и видео обычно не инлайнится из-за размера, но технически возможно:

import audio fr om './sound.mp3';

При малом размере файл превращается в:

data:audio/mpeg;base64,...

Поведение emitFiles

Параметр emitFiles управляет генерацией файлов на диске:

  • true — внешние файлы создаются в dist
  • false — весь контент стремится к инлайнингу (если поддерживается)

При отключении генерации файлов важно учитывать, что крупные ассеты могут раздувать JS-бандл.

Управление именами файлов

Опция fileName задаёт шаблон выходных файлов:

fileName: '[name]-[hash][extname]'

Доступные токены:

  • [name] — исходное имя
  • [hash] — хэш содержимого
  • [extname] — расширение файла

Это важно при кешировании и CDN-доставке.

MIME-типы и автоматическое определение

Некоторые конфигурации требуют явного указания MIME-типа. В базовых сценариях плагин определяет его автоматически по расширению файла.

При кастомных расширениях возможно переопределение:

url({
  include: ['**/*.custom'],
  mimeTypes: {
    '.custom': 'application/custom-type'
  }
});

Встраивание SVG как строки

SVG может быть обработан двумя способами:

Base64-вариант

import icon from './icon.svg';

Результат:

data:image/svg+xml;base64,...

URL-кодирование (альтернатива)

Некоторые сборки используют URI encoding вместо base64 для уменьшения размера:

data:image/svg+xml;utf8,<svg ...>

Rollup-плагины могут быть расширены для поддержки такого режима через трансформации.

Ограничения base64-инлайнинга

Base64 увеличивает размер данных примерно на 33%, что влияет на:

  • размер JS-бандла
  • время парсинга скрипта
  • потребление памяти при загрузке

Поэтому лимитирование через limit является ключевым механизмом оптимизации.

Комбинация с другими Rollup-плагинами

Встраивание base64 часто используется совместно с:

  • @rollup/plugin-image — для упрощённой работы с изображениями
  • rollup-plugin-postcss — для инлайнинга ресурсов в CSS
  • @rollup/plugin-commonjs — для совместимости модулей
  • @rollup/plugin-node-resolve — для корректного разрешения зависимостей

Пример связки:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import url from '@rollup/plugin-url';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/app.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    commonjs(),
    url({
      lim it: 5 * 1024
    })
  ]
};

Практика применения в UI-проектах

Встраивание base64 наиболее эффективно в сценариях:

  • небольшие иконки интерфейса
  • логотипы в компонентах
  • критические ресурсы первого экрана
  • CSS-иконки через JS-инъекцию
  • динамически создаваемые элементы интерфейса

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

Типичные ошибки конфигурации

Слишком высокий lim it

limit: 100 * 1024

Приводит к раздуванию JS и ухудшению LCP.

Отсутствие include

Без ограничения по типам могут инлайниться нежелательные файлы.

Игнорирование cache-busting

При инлайнинге файлы не участвуют в HTTP-кешировании как отдельные сущности, что меняет стратегию обновления ассетов.

Поведение в production-сборках

В production режиме base64-инлайнинг обычно комбинируется с:

  • минификацией
  • tree-shaking
  • хэшированием файлов
  • разделением чанков

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

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

Инлайнинг через base64 становится частью общей стратегии asset management:

  • критические ресурсы — inline
  • средние — отдельные файлы с кешированием
  • большие — CDN с lazy loading

Rollup обеспечивает точку интеграции между этими слоями через плагины обработки ресурсов.

Оглавление