<aside> 🧑‍🎓 The critical request chain will update as a result of main chunk getting inlined. Learn more how to identify it:

How to identify critical request chain?

</aside>

Inlining the main chunk can help reduce time spent on awaiting response (with chunk) from server to show initial placeholder, thus improving the FCP. Consider the following request chain (unoptimized):

Inlining the main chunk will have the following effect:

To achieve this effect, following actions are required:

1. Create a new build configuration plugin

Create a next extension, declare a build configuration plugin inside. It is possible to use an exiting extension too. Follow these instructions:

How to build configuration plugins?

2. Modify Webpack configuration to inline main chunk

<aside> 🧠 ScandiPWA is based off the CRA. It provides a custom Webpack plugin, which is responsible for inlining the chunks.

</aside>

Inside of a build configuration plugin, add the following logic:

webpackConfig.plugins.forEach((plugin) => {
  if (plugin.tests) {
    plugin.tests.push(/main.+[.]js/);
  }
})

<aside> 🎉 That’s how you inline the main chunk!

</aside>