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

user_7750289 0
Viewed 639

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 enter image description here

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?

webpack next.js reactjs
2 Answers

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.

user_65393170

In my case. The huge list of Links on one page - loading many chunks and crashed server NextJs. I added prefetch={false} and fix it.

<Link href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

More details here https://web.dev/route-prefetching-in-nextjs/

user_19324940
Related