Nextjs:Other pages chunks are also loaded in the current page

Question

As per the nextjs document, chunks will be loaded based on the route navigation by default. But in my project, all the chunks created for other pages are also loading in the current page. Therefore, it is affecting the lighthouse score performance and the first paint is taking lot of time.

Here are the chunks loaded on the page

Referred Docs: https://web.dev/granular-chunking-nextjs/ , https://web.dev/code-splitting-with-dynamic-imports-in-nextjs/ , https://web.dev/route-prefetching-in-nextjs/

Is there any configuration required to segregate the chunks based on the routes in Nextjs?

Answer 1

From the image looks like you are looking on the computed DOM, Next.js preloads links of pages when they become visible, This is a performance optimization, which will work only if the user's internet is fast.

To make sure that it is loaded at runtime only, check the returned HTML with "view source", you should not see these scripts.