<aside> 🧑‍🎓 The critical request chain is necessary to learn what chunks must be preload. Learn more how to identify it:critical reducers in react\

How to identify critical request chain?

</aside>

The sooner the data preload request can be made, the faster the data will be available for rendering. Loading data is more important than chunks, as it contains URL of image to render as LCP element. The scripts can reuse results of these data fetch requests right away.

Consider the following request chain:

With render moved into a separate chunk, the resulting critical request chain will look as follows:

1. Move rendering logic into a new chunk

As data preload is made ASAP, it’s declarations are located in application entry-point. Learn more how to preload critical data in this article:

How to preload critical data?

First, create a new file, to keep rendering logic in, for example: src/render.js. Move rendering logic from src/index.js to newly created file. Now, the src/render.js file could contain the following logic:

import { render } from 'react-dom';

import App from 'Component/App';

import 'Style/main';

if (module.hot) {
    module.hot.accept();
}

function HotApp() {
    return <App />;
}

render(<HotApp />, document.getElementById('root'));

Next, dynamically import the newly created file in src/index.js, hint Webpack to organize the content of import to a named chunk (it will come handy later):

// ... preload logic

import(
    /* webpackMode: "lazy", webpackChunkName: "render" */
    './render'
);

In the end, your src/index.js could look as follows:

import { prefetchCategory, prefetchProduct } from 'Util/Preload';

switch (window.actionName.type) {
case 'CATEGORY':
	prefetchCategory();
	break;
case 'PRODUCT':
	prefetchProduct();
	break;
}

export const isPriorityLoadedByDefault = (
    window.actionName?.type !== 'CATEGORY'
    && window.actionName?.type !== 'PRODUCT'
    && window.actionName?.type !== 'CMS_PAGE'
		// Additional page types that need deprioritizing can be added here
);

// vvv Set to false, aka. make app wait for priority load ONLY for given pages
window.isPriorityLoaded = isPriorityLoadedByDefault;

import(
    /* webpackMode: "lazy", webpackChunkName: "render" */
    './render'
);

2. Preload rendering logic chunk

Preload the render chunk. Follow the instructions specified in the following article. Update:

1. cacheGroupWhitelist in the Webpack plugin config
2. chunkValidator map in HTML document template

How to preload critical chunks?

<aside> 🎉 This is how you split data preload and render logic!

</aside>