Next.js Discord

Discord Forum

Does a component index file bundle every component if a single one is imported on a page?

Unanswered
Silver Fox posted this in #help-forum
Open in Discord
Avatar
Silver FoxOP
import Avatar from './Avatar/Avatar';
import Button from './Button/Button';
// ...

export {
Avatar,
Button,
// ...
}

When i tried to import avatar in one page I just noticed the other component imported as well therefore it increases the page size. Any help is appreciated.

5 Replies

Avatar
Eric Burel
Just so you can find more answer this is called a barrel file
(this name gave nothing in Google the first time I discovered it and suddently it's everywhere, you should find more info)
in an ideal world barrel files are automatically cut but there maybe 1) bug 2) improper setups either on Next side or the lib size
I think even 14.1 includes a fix for mui and lodash, some versions may have regressions when it comes to that
and the package must be friendly to such cuts (I don't remember exactly but basically it must not have side-effects so that the cut doesn't alter the package behaviour, maybe it should use ES modules, stuff like that...)