Splitting the JS bundle per page

[umarmw]

Hello,

Issue: Google speed is complaining of unused JS files

Background: I have currently around 20 different page types which load different react components. The entire site is generated statically. The bundle generated as "common" is quite big, as more than 50% are common in all the pages. However, a normal user wont go though all the different page types.

My question is; Is it possible to generate a bundle per page type? If yes, how can this be achieved?

Thanks.

[timneutkens]

Make sure you're using latest Next.js.

[umarmw]

I'm currently using v9.4.4 and also making use of getStaticProps. Any other idea?

[umarmw]

@timneutkens I was not properly using the dynamic load. It's fine now. Thanks.
ref:
https://web.dev/code-splitting-with-dynamic-imports-in-nextjs/
https://nextjs.org/docs/advanced-features/dynamic-import