Bundle Splitting

When building a modern web application, bundlers such as Webpack or Rollup take an application's source code, and bundle this together into one or more bundles. When a user visits a website, the bundle is requested and loaded in order to display the data to the user's screen.

JavaScript engines such as V8 are able to parse and compile data that's been requested by the user as it's being loaded. Although modern browsers have evolved to parse and compile the code as quickly and performantly as possible, the developer is still in charge of optimizing two steps in the process: the loading time and execution time of the requested data. We want to make sure we're keeping the execution time as short as possible to prevent blocking the main thread.

When to Use

• Use this when your application has a large JavaScript bundle that affects load times
• This is helpful when you want to reduce First Contentful Paint (FCP) and Largest Contentful Paint (LCP)
• Use this when parts of your code are only needed for specific user interactions or routes

Instructions

• Use bundlers like Webpack or Rollup to split code into multiple smaller bundles
• Separate code that isn't needed for the initial render into its own bundle
• Consider the impact on Time To Interactive (TTI) and prioritize critical rendering code

Details