Plugin System Overview

A high-level overview over the plugin system

A diagram of the Parcel plugin system

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.

The assets are grouped into bundles in the bundling phase. The output filename of each bundle is determined in the naming phase.

Then, the packaging, optimizing, and compressing phases work together to generate the final contents of every bundle, in parallel.

The packaging phase merges the assets in each bundle together into output files.

The optimizing phase transforms the contents of each bundle. When this is done, Parcel determines the content hashes of each bundle, which are applied to the final output filenames.

Finally, the compressing phase generates one or more encodings for each output file as they are being written to the file system.

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 converts it into the Bundle Graph, which contains the Asset Graph and additionally describes which assets should be grouped together into bundles (and what the relationship between these bundles is).

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