A high-level overview over the plugin system

Scroll to the right to see more

ΒΆ Parcel Architecture

Even if you aren't doing anything that complex, if you are going to use Parcel a lot it makes sense to take some time and understand how it works.

ΒΆ Phases of Parcel

At a high level Parcel runs through several phases:

The resolving and transforming phases work together in parallel to build a graph of all your assets.

This asset graph gets translated into bundles in the bundling phase.

Then the packaging phase takes the assets in the calculated bundles and merges them together into files each containing an entire bundle.

Finally, in the optimizing phase, Parcel takes these bundles files and runs them through optimizing transforms.

ΒΆ Asset Graph

During the resolving and transforming phases, Parcel discovers all the assets in your app or program. Every asset can have its own dependencies on other assets which Parcel will pull in.

The data structure that represents all of these assets and their dependencies on one another is called the "Asset Graph".

ΒΆ Bundle Graph

Once Parcel has built the entire Asset Graph, it begins turning it into "bundles". These bundles are groupings of assets that get placed together in a single file. Bundles will (generally) contain only assets in the same language.

Some assets are considered "entry" points into your app, and will stay as separate bundles. For example, if your index.html file links to an about.html file, they won't be merged together.

ΒΆ Complete List of Plugin Types (in a somewhat correct order)