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

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

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

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

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

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

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

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

3. Упаковка

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

Help us improve the docs

If something is missing or not entirely clear, please file an issue on the website repository or edit this page.