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

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

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

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

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

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

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

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

3. Упаковка

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