PSA 📢: Avoid Barrels (A barrel is a file that exports code from other...
PSA 📢: Avoid Barrels
(A barrel is a file that exports code from other files)
Barrel benefits:
✅ Shorter import paths
✅ Support importing many files via one import
✅ "Hide" modules - Only export some modules for the "public" interface
But, I avoid barrels. Here's why:
🚫 Bloats the bundle. Inhibits tree shaking.
🚫 Increases memory usage.
🚫 Slows tooling (builds, tests, linting). Barrels create more modules to parse.
🚫 Slows code navigation ("Find all references" finds the barrel instead of the actual source).
🚫 Barrels shorten import paths and group related imports. Sounds nice, but it's an outdated benefit because I don't write imports anymore - my editor reliably auto-imports.
More details on barrel downsides: https://github.com/christianvuerings/eslint-plugin-no-re-export#references
And check out these ESLint plugins to catch barrels:
Avoid re-exports: https://www.npmjs.com/package/eslint-plugin-no-re-export
or
https://github.com/gajus/eslint-plugin-canonical#no-re-export
Avoid imports from barrel files: https://github.com/gajus/eslint-plugin-canonical#no-barrel-import
People often put each component in a folder to group the files, and use a barrel to shorten the import.
Instead, I suggest eliminating the needless parent folder.
The files are naturally grouped together alphabetically if they start with the component's name.
No barrel or folder needed.
