Bundle Splitting

WHAT

It is a technique to split the larger javascript bundle into smaller bundles. This is done to reduce the initial load time of the application.

Normally, whole JS Bundle is loaded at once. So the Initial Load Time is high. This is because the browser has to download the big bundle , parse it and then execute it.

WHY

There are certain parts/components of your website, that are used rarely or used conditionally. So its not a good idea to load them initially and then they are not needed.

So in bundle splitting, we split the bundle into smaller bundles and they loaded on-demand.

There will be a main.bundle.js which will be loaded first and then the other bundles will be loaded on-demand.

Bundle Splitting also decrease the FCP (First Contentful Paint) time and TTL(Time to Interactive) time.

BENEFITS

• Reduce the Initial Load Time
• Improved UX

HOW

To do this we can use the module bundlers like webpack or rollup or parcel etc.

• Dynamic Imports : Use Dynamic Imports to split code at specific time.

• Route-Based Code Splitting : Use this to split code based on the route.

• Lazy Loading : Use this to load the code only when it is needed.

BONUS

• FCP(First Contentful Paint) : It is a metric that measures the time it takes until first content is shown.
  • After FCP user sees the content but it is not interactive.
• LCP(Largest Contentful Paint) : It is a metric that measures the time it takes until the largest content is shown.
• TTL(Time to Interactive : It is a metric that measures the time it takes for the page to become responsive.