Копирование файлов без обработки

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

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

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

Механизм обнаружения статических ресурсов

Parcel анализирует зависимости проекта начиная с входных точек. При встрече импорта файлов, не являющихся JavaScript или CSS-модулями, выполняется классификация ресурса.

К статическим ресурсам относятся:

  • изображения (.png, .jpg, .webp, .gif, .svg при определённых условиях)
  • шрифты (.woff, .woff2, .ttf, .otf)
  • медиафайлы (.mp4, .mp3, .webm)
  • произвольные файлы (.pdf, .zip, .wasm)
  • текстовые файлы, подключаемые как ресурсы

После классификации ресурс попадает в систему ассетов, где определяется стратегия обработки. Для неподдерживаемых преобразованиями типов применяется стратегия копирования.

Прямая копия и система хеширования

Хотя термин «копирование без обработки» предполагает прямое перенесение файла, Parcel почти всегда добавляет этап переименования.

Файл копируется в выходную директорию, но его имя модифицируется добавлением контентного хеша:

logo.png → logo.8f3a91c2.png

Такой подход решает несколько задач:

  • обеспечение долгосрочного кэширования в браузере
  • предотвращение конфликтов имён
  • автоматическое обновление ресурсов при изменении содержимого

Контентный хеш вычисляется на основе бинарного содержимого файла. Даже минимальное изменение приводит к изменению итогового имени.

Поведение при импорте файлов

Parcel позволяет импортировать статические ресурсы напрямую в JavaScript и CSS.

Импорт в JavaScript

import logoUrl from './assets/logo.png';

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

document.body.appendChild(img);

В этом случае файл не преобразуется, а копируется в сборку, после чего возвращается строка с итоговым URL.

Использование в CSS

.background {
  background-image: url('./images/bg.jpg');
}

Parcel анализирует url() и автоматически подключает файл как зависимость. Далее файл копируется в выходной каталог, а ссылка переписывается на итоговый путь.

Роль директории public

Для случаев, когда требуется полностью исключить обработку и хеширование, используется специальная директория public.

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

Типичное поведение:

public/favicon.ico → dist/favicon.ico
public/robots.txt → dist/robots.txt

Особенности:

  • отсутствует изменение имени файла
  • отсутствует трансформация содержимого
  • сохраняется структура каталогов
  • не участвует в графе зависимостей Parcel

Такая модель применяется для ресурсов, к которым требуется стабильный прямой доступ по фиксированному пути.

Отличие импортируемых ресурсов от public-файлов

Характеристика Импорт в коде public директория
Хеширование применяется отсутствует
Участие в графе зависимостей да нет
Оптимизация возможна отсутствует
Изменение имени да нет
Контроль через код да нет

Импортируемые ресурсы интегрируются в систему сборки, тогда как public используется как статическое хранилище.

Ссылки на ресурсы и разрешение путей

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

При сборке происходит:

  1. анализ исходного пути
  2. определение типа ресурса
  3. копирование файла в dist
  4. генерация финального URL

Пример трансформации:

src/index.js
src/assets/icon.svg

Результат:

import icon from './assets/icon.svg';
// icon = "/icon.3d2f9c1a.svg"

Если проект развернут в подкаталоге, Parcel учитывает publicUrl, корректируя пути автоматически.

Поведение при изменении файлов

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

Изменение приводит к:

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

Такой подход минимизирует объём пересборки и ускоряет инкрементальную работу.

Кэширование и инкрементальная сборка

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

Если содержимое совпадает с закэшированной версией, копирование не выполняется повторно. Вместо этого используется ранее сохранённый результат.

Основные принципы:

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

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

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

Как ресурс

import icon from './icon.svg';

SVG копируется как файл и возвращается URL.

Как модуль

При использовании специфических настроек SVG может быть инлайнен или преобразован в React-компонент (при подключении соответствующих плагинов). Однако в базовом режиме он остаётся статическим файлом.

WASM и бинарные ресурсы

WebAssembly-модули и бинарные файлы также попадают в категорию копируемых ресурсов.

import wasmUrl from './module.wasm';

WebAssembly.instantiateStreaming(fetch(wasmUrl));

Parcel переносит .wasm файл в сборку без изменений, обеспечивая корректную загрузку через HTTP.

Управление путями в сложных проектах

В крупных проектах часто используется вложенная структура ассетов:

src/
  assets/
    images/
    fonts/
    media/

Parcel сохраняет структуру при копировании, если ресурс импортирован с сохранением относительного пути. Однако итоговое имя может быть изменено из-за хеширования.

Пример:

src/assets/images/photo.jpg
→ dist/photo.91ac3d.jpg

или, при сохранении структуры в зависимости от настроек:

dist/assets/images/photo.91ac3d.jpg

Типичные проблемы при работе со статическими файлами

При неправильной организации ресурсов возникают следующие ситуации:

  • попытка доступа к файлу без импорта приводит к отсутствию его в графе сборки
  • использование относительных путей без учёта publicUrl вызывает ошибки загрузки
  • дублирование файлов увеличивает размер сборки
  • смешивание public и импортируемых ресурсов приводит к несогласованным путям

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

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

В production-режиме копирование статических файлов сопровождается дополнительными оптимизациями:

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

Файлы остаются неизменёнными по содержимому, но их представление в выходной структуре оптимизируется для веб-доставки.

Оглавление