Parcel supports zero configuration code splitting out of the box. This allows you to split your application code into separate bundles which can be loaded on demand, which means smaller initial bundle sizes and faster load times. As the user navigates around in your application and modules are required, you can load child bundles on demand.
Code splitting is controlled by use of the dynamic
import() syntax, which works like a hybrid of the normal
import statement and the
require function, but returns a Promise. This means that the module can be loaded asynchronously.
¶ Using dynamic imports
The following example shows how you might use dynamic imports to load a sub-page of your application on demand.
¶ Dynamic imports with async/await
import() returns a Promise, you can also use async/await syntax.
¶ "Internalized" Bundles
If a asset is imported both synchronously and asynchronously, it doesn't make sense to create an actual async bundle (because the module is already loaded anyways).
In this situation, Parcel instead turns
Promise.resolve(require("foo")). So in a larger build, you should think of dynamic/async imports as "I don't need this import synchronously" rather than "This will become a new bundle".
¶ Shared Bundles
<script> use the asset(s) or when two dynamic imports have common assets), Parcel splits these into a separate sibling bundle ("shared" bundle) to minimize code duplication.
The parameters for when this happens can be configured in
minBundles: for an asset to be split, it has to be used by more than
minBundleSize: for a shared bundled to be created, it has to be at least
minBundleSizebytes big (before minification/treeshaking)
maxParallelRequests: To prevent overloading the network with too many concurrent requests, this ensure that a given bundle can have only
maxParallelRequests - 1sibling bundles (which have be loaded together with the actual bundle).
http: This is a shorthand for setting the above values to defaults which are optimized for HTTP/1 or HTTP/2:
You can read more about this topic here on web.dev