🛠 Как это работает?

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

1. Построение дерева ресурсов

Parcel принимает в качестве входных данных один элемент ресурса, который может быть любого типа: JS-файл, HTML, CSS, изображение и так далее. Существуют различные типы ресурсов, определенные в Parcel, которые знают, как обрабатывать конкретные типы файлов. Ресурсы анализируются, их зависимости извлекаются, и они преобразуются в их окончательную скомпилированную форму. Это создает дерево ресурсов.

2. Построение дерева бандлов

После того, как дерево ресурсов построено, ресурсы помещаются в дерево бандлов. Бандл создаётся для входного ресурса, а для динамических вызовов import() создаются дочерние бандлы, что в итоге приводит к разделению кода.

Родственные бандлы создаются при импорте ресурсов другого типа, например, если вы импортировали CSS-файл из JavaScript, он будет помещен в соседний бандл с соответствующим бандлом для JavaScript.

Если ресурс требуется более чем в одном бандле, он поднимается до ближайшего общего предка в дереве бандлов, поэтому он не включается более одного раза.

3. Упаковка

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