Next.js Discord

Discord Forum

Bundle size of unrelated pages increases when importing components from a library

Mrigal carp posted this in #help-forum
Open in Discord
Mrigal carpOP
I'm using react-aria-components for my website. I have separate root layouts for the (account) route, which contains the register and login pages, and the (home) route for the home page. While I use some react-aria-components in the login and register pages, I use more in the home page.

The issue is that when I import components from react-aria-components into the home page, which aren't used in the login and register pages, it still increases the bundle size for those pages.

It appears that as soon as I use even one component from react-aria-components on a page, the bundle size for that page increases as if it were using every react-aria-components component I use anywhere across the website.

Interestingly, the "First Load JS shared by all" remains unchanged.

Why does this happen, and how can I fix it?

0 Replies