~/components vs ~/components/Button
Any opinions on this? Does A affect performance? (importing from a file that exports many other components)
A
B
13 Replies
Even if one is faster than the other, the performance penalty would be negligible. Also, the way you write it isn't necessarily the way it is run. There are a ton of optimization steps between what you write and what is actually being run.
Right, so I was wondering if those optimizations are good enough to not worry about performance
Performance is not an issue until it is an issue.
why are you doing either of these
just
export function Button() {}
and import { Button } from '~/components/Button
Some components may need additional files, like helper functions and so on, so that'd be more like
But either way, my question was more about this part
Do B, barrel exports (exporting everything from one file) make the builder do more work to exclude unused dependencies
With B it’s not a problem since you only import what you use
Yes, I don't see a disadvantage here other than having multiple import lines, which I don't really mind, but if it's all exactly the same, I'd prefer A
it's not the same A is worse
I guess where you can really tell the difference is with huge libraries like MUI, and they use default imports in their examples
I just migrated away from A since my bundler wasn't tree shaking properly resulting in me shipping more JS than needed to the client
Yes I don't trust the bundler magic with JS
Minimizing bundle size - Material UI
Learn more about the tools you can leverage to reduce the bundle size.
You can see them always using default imports in their examples: https://mui.com/material-ui/react-button/#buttons-with-icons-and-label
React Button component - Material UI
Buttons allow users to take actions, and make choices, with a single tap.