CODEWITHSUNDEEP
reactjswebpacknext.js
CodeZombie
CodeZombie

Reputation: 2087

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

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?

Upvotes: 4

Views: 2844

Answers (2)

Ruslan Novikov
Ruslan Novikov

Reputation: 1527

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/

Upvotes: 0

felixmosh
felixmosh

Reputation: 35503

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.

Upvotes: 4

Related Questions