~/components vs ~/components/Button

Any opinions on this? Does A affect performance? (importing from a file that exports many other components) A

// ~/components/index.ts
export { default as Button } from './Button'
export { default as Label } from './Label'
export { default as Toggle } from './Toggle'

// ~/components/Button/Button.tsx
export default function Button() { return <button /> }

// ~/components/Button/index.ts
export { default } from './Button'

// ~/pages/index.tsx
import { Button, Label } from '~/components'

// ~/components/index.ts
export { default as Button } from './Button'
export { default as Label } from './Label'
export { default as Toggle } from './Toggle'

// ~/components/Button/Button.tsx
export default function Button() { return <button /> }

// ~/components/Button/index.ts
export { default } from './Button'

// ~/pages/index.tsx
import { Button, Label } from '~/components'

// ~/components/Button/Button.tsx
export default function Button() { return <button /> }

// ~/components/Button/index.ts
export { default } from './Button'

// ~/pages/index.tsx
import Button from '~/components/Button'
import Label from '~/components/Label'

// ~/components/Button/Button.tsx
export default function Button() { return <button /> }

// ~/components/Button/index.ts
export { default } from './Button'

// ~/pages/index.tsx
import Button from '~/components/Button'
import Label from '~/components/Label'

13 Replies

Christoph•16mo ago

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.

MochaOP•16mo ago

Right, so I was wondering if those optimizations are good enough to not worry about performance

Christoph•16mo ago

Performance is not an issue until it is an issue.

cje•16mo ago

why are you doing either of these just export function Button() {} and import { Button } from '~/components/Button

MochaOP•16mo ago

Some components may need additional files, like helper functions and so on, so that'd be more like

import Button from '~/components/Button/Button'

import Button from '~/components/Button/Button'

But either way, my question was more about this part

// A
import { Button, Label } from '~/components'
// B
import Button from '~/components/Button'
import Label from '~/components/Label'

// A
import { Button, Label } from '~/components'
// B
import Button from '~/components/Button'
import Label from '~/components/Label'

Rhys•16mo ago

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

MochaOP•16mo ago

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

Rhys•16mo ago

it's not the same A is worse

MochaOP•16mo ago

I guess where you can really tell the difference is with huge libraries like MUI, and they use default imports in their examples

Rhys•16mo ago

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

MochaOP•16mo ago

Yes I don't trust the bundler magic with JS

MochaOP•16mo ago

https://mui.com/material-ui/guides/minimizing-bundle-size/#when-and-how-to-use-tree-shaking

Minimizing bundle size - Material UI

Learn more about the tools you can leverage to reduce the bundle size.