CODEWITHSUNDEEP
reactjsnext.jsserver-side-renderingwebpack-splitchunks
sam16930
sam16930

Reputation: 71

How to stop loading chunks from different pages in nextjs

I am trying to improve the lighthouse performance of my nextjs project but I keep on seeing unwanted js being loaded in the webpage. The following image is a screenshot of the coverage enter image description here

Some chunks of different pages are also being loaded. What can I do to stop the loading of unwanted chunks ? I have explored splitchunkspluggin , removed many unwanted package,used dynamic imports but nothing seems to work. Currently Nextjs v12 and React v17 is being used. I have done a lot of optimizations on this project but nothing seems to bring any significant change in the project. This was the earlier build reportenter image description here but after making some changes the current build report is this

enter image description here

I have tried almost everything I found on the internet like upgrading the nextjs version , making some changes to the splitchunk plugin that is manually splitting some of the chunks , adding prefetch={false} to the component , tried to use dynamic imports from next/dynamic but nothing seems to make any improvements to the performance.

This is the current lighthouse reportenter image description here

Upvotes: 5

Views: 2316

Answers (1)

whygee
whygee

Reputation: 1984

If you are using the <Link> component from next.js, you should set the prefetch props to false to tell next to not automatically prefetch linked pages.

I bet you would still want a prefetch to happen for UX reasons, you can do that manually in a useEffect after the page has loaded so as not to affect initial loading with next router router.prefetch([path])

Upvotes: 1

Related Questions