Parcel включает встроенный конвейер обработки изображений, который активируется без дополнительной конфигурации в большинстве сценариев. В production-сборке изображения автоматически проходят этапы сжатия, преобразования форматов и генерации оптимизированных вариантов под разные устройства. Архитектура основана на модульных трансформерах и оптимизаторах, где ключевую роль играет встроенный механизм обработки ассетов.
При сборке проекта Parcel анализирует импортируемые изображения как обычные модули. В production-режиме активируется оптимизация, включающая:
Оптимизация выполняется через встроенный оптимизатор изображений, основанный на высокопроизводительных библиотеках обработки растровой графики. Это позволяет уменьшать вес ассетов без ручного подбора параметров сжатия.
Parcel автоматически конвертирует изображения в более эффективные форматы при наличии соответствующей поддержки в окружении сборки:
При использовании HTML-источников или импортов Parcel может формировать набор альтернативных форматов, позволяя браузеру выбирать наиболее подходящий вариант.
Встроенный механизм трансформации позволяет изменять изображение прямо в момент импорта с использованием query-параметров:
Пример логики обработки:
Такая модель устраняет необходимость в предварительной генерации всех вариантов изображений вручную и переносит оптимизацию в этап сборки.
Parcel поддерживает создание адаптивных изображений через
автоматическую генерацию наборов размеров. При использовании
HTML-разметки сборщик может формировать srcset, включающий
несколько версий одного изображения.
Основные особенности:
Это снижает объём передаваемых данных на мобильных устройствах и повышает производительность загрузки страниц.
Каждое изображение в итоговой сборке получает уникальный хеш в имени файла. Это обеспечивает:
Стратегия хеширования применяется ко всем оптимизированным ассетам и интегрируется с системой модульной сборки Parcel.
Parcel поддерживает автоматическое встраивание изображений в код в виде Data URL при малом размере файла. Это уменьшает количество HTTP-запросов и ускоряет загрузку интерфейса.
Поведение определяется порогом:
Такой подход балансирует между производительностью сети и размером бандла.
В режиме разработки оптимизация изображений минимальна для ускорения сборки. В production включается полный пайплайн обработки:
Разделение режимов позволяет сохранять высокую скорость разработки при сохранении оптимального результата в финальной сборке.
В типичной структуре проекта изображения рассматриваются как импортируемые модули:
Parcel формирует единый конвейер обработки, где каждое изображение проходит цепочку трансформаций: от импорта до финальной оптимизированной версии, готовой к доставке в браузер.