Обработка атрибутов: src, href, srcset, data-src

Parcel как сборщик модулей ориентирован на минимальную конфигурацию и автоматическую обработку ресурсов, включая HTML-атрибуты, содержащие ссылки на внешние файлы. В процессе сборки он анализирует дерево зависимостей не только в JavaScript, но и в HTML, CSS и шаблонах, извлекая ресурсы из атрибутов и преобразуя их в управляемые зависимости.

Общий принцип работы с ресурсными атрибутами

Parcel использует статический анализ HTML и JSX-подобных структур для поиска атрибутов, которые потенциально содержат ссылки на внешние ресурсы. Такие атрибуты преобразуются в зависимости, после чего файлы попадают в граф сборки.

Ключевая идея заключается в том, что любые ссылки на ресурсы рассматриваются как модули, а не как «строки внутри разметки».

Parcel автоматически:

  • находит пути к файлам в атрибутах;
  • добавляет их в dependency graph;
  • оптимизирует и копирует ресурсы в выходную директорию;
  • переписывает ссылки на итоговые хешированные файлы.

Атрибут src

Обработка изображений и медиафайлов

Наиболее распространённый сценарий — обработка src в тегах <img>, <video>, <audio>.

Пример:

<img src="./images/photo.jpg" />

Parcel воспринимает ./images/photo.jpg как зависимость. В процессе сборки происходит:

  • загрузка файла как модуля;
  • применение трансформаций (оптимизация изображения, изменение формата при необходимости);
  • генерация нового пути с хешем;
  • замена исходного значения атрибута.

Результат:

<img src="/dist/photo.a8f3c1.jpg" />

Особенности обработки

Parcel поддерживает:

  • относительные пути (./, ../);
  • абсолютные пути от корня проекта при настройке alias;
  • импорт ресурсов через JavaScript с последующим присваиванием src.

Пример через JS:

import imgUrl from './images/photo.jpg';

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

В этом случае файл обрабатывается аналогично HTML-атрибуту.

Атрибут href

Обработка ссылок на ресурсы

Атрибут href в Parcel рассматривается в зависимости от контекста:

  • ссылки на стили (<link rel="stylesheet">);
  • ссылки на страницы (HTML entry points);
  • ссылки на файлы (PDF, изображения, архивы).

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

<link rel="stylesheet" href="./styles/main.css" />

Parcel:

  • находит CSS-файл;
  • запускает CSS-трансформации (PostCSS, минификация);
  • добавляет в граф зависимостей.

HTML как зависимость

Если href указывает на HTML:

<a href="./about.html">О проекте</a>

Parcel может включить страницу в сборку как отдельный entry point при определённых конфигурациях или плагинах маршрутизации.

Атрибут srcset

Работа с адаптивными изображениями

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

Пример:

<img 
  src="./img/photo-1x.jpg"
  srcset="
    ./img/photo-1x.jpg 1x,
    ./img/photo-2x.jpg 2x,
    ./img/photo-3x.jpg 3x
  "
/>

Parcel:

  • парсит строку srcset;
  • извлекает все пути к изображениям;
  • добавляет каждый файл в граф зависимостей;
  • обрабатывает их как отдельные ресурсы;
  • переписывает ссылки на оптимизированные версии.

Важный механизм парсинга

Parcel учитывает специфику srcset:

  • разделение по запятым;
  • поддержка дескрипторов 1x, 2x, w;
  • сохранение структуры атрибута после трансформации.

Пример результата:

<img 
  src="/dist/photo-1x.3f21.jpg"
  srcset="
    /dist/photo-1x.3f21.jpg 1x,
    /dist/photo-2x.91ab.jpg 2x,
    /dist/photo-3x.c44d.jpg 3x
  "
/>

Атрибут data-src

Ленивые загрузки и пользовательские схемы

data-src не является стандартным ресурсным атрибутом браузера, но Parcel обрабатывает его как потенциальную зависимость при наличии соответствующих плагинов или HTML-трансформеров.

Пример:

<img data-src="./images/heavy.jpg" class="lazy" />

Parcel:

  • обнаруживает путь внутри data-src;
  • включает файл в сборку;
  • переписывает ссылку аналогично src, если включена трансформация lazy-loading.

Использование в ленивой загрузке

Часто применяется совместно с Jav * aScript:

const img = document.querySelector('img.lazy');
img.src = img.dataset.src;

Parcel в этом случае:

  • не изменяет поведение runtime;
  • обеспечивает корректную обработку пути на этапе сборки.

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

Parcel разделяет атрибуты на две категории:

Стандартные ресурсные атрибуты

  • src
  • href
  • srcset

Они обрабатываются по умолчанию.

Нестандартные или пользовательские

  • data-src
  • data-href
  • кастомные атрибуты

Они обрабатываются только при наличии:

  • соответствующих плагинов;
  • настроек трансформации HTML;
  • дополнительных парсеров.

Внутренний механизм трансформации

Процесс обработки атрибутов включает несколько этапов:

1. Парсинг HTML

Parcel строит AST (Abstract Syntax Tree) документа и анализирует узлы с атрибутами.

2. Извлечение зависимостей

Каждое значение атрибута проверяется:

  • является ли строкой пути;
  • соответствует ли допустимому формату;
  • не является ли внешним URL.

3. Построение графа зависимостей

Все найденные ресурсы добавляются в единый dependency graph, где:

  • узлы — файлы;
  • ребра — зависимости между ними.

4. Трансформация ресурсов

В зависимости от типа файла:

  • изображения проходят оптимизацию;
  • CSS минифицируется;
  • JS транспилируется;
  • медиафайлы копируются или конвертируются.

5. Перезапись атрибутов

После обработки Parcel заменяет исходные пути на итоговые:

  • с хешами;
  • с учётом public URL;
  • с учётом режима production/development.

Обработка внешних ссылок

Parcel различает локальные и внешние ресурсы.

Пример внешнего URL:

<img src="https://example.com/image.jpg" />

Такие ссылки:

  • не попадают в граф зависимостей;
  • не оптимизируются;
  • остаются без изменений.

Это важно для корректной работы CDN и сторонних сервисов.

Поведение в режиме разработки и продакшена

Development mode

  • минимальная оптимизация;
  • быстрый re-bundling;
  • сохранение читаемых путей;
  • использование dev server URL.

Production mode

  • полная оптимизация ресурсов;
  • хеширование файлов;
  • агрессивное кэширование;
  • переписывание всех атрибутов на итоговые пути.

Типичные ошибки при работе с атрибутами

Неправильные относительные пути

<img src="images/photo.jpg" />

При отсутствии корректной структуры проекта Parcel может не найти файл.

Использование динамических строк

img.src = "./images/" + name + ".jpg";

Такие выражения не анализируются статически и выпадают из графа зависимостей.

Неподдерживаемые атрибуты без плагинов

<img data-lazy-src="./img.jpg" />

Без трансформации Parcel игнорирует такие зависимости.

Расширение поведения через плагины

Parcel поддерживает расширение обработки HTML через плагины, которые позволяют:

  • добавлять новые атрибуты в список ресурсных;
  • переопределять правила парсинга;
  • внедрять кастомную обработку data-* полей;
  • интегрировать lazy-loading стратегии.

Это делает систему обработки атрибутов гибкой и расширяемой без изменения ядра сборщика.

Итоговые принципы обработки

  • Любой статический путь в src, href, srcset рассматривается как зависимость.
  • Все зависимости становятся частью графа сборки.
  • Ресурсы оптимизируются в зависимости от типа.
  • Атрибуты переписываются после трансформации.
  • Нестандартные атрибуты требуют явной поддержки.
  • Внешние URL исключаются из обработки.
Оглавление