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.
(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: #references" target="_blank" rel="noopener" onclick="event.stopPropagation()">github.com
And check out these ESLint plugins to catch barrels:
Avoid re-exports: npmjs.comΒ
or
#no-re-export" target="_blank" rel="noopener" onclick="event.stopPropagation()">github.com
Avoid imports from barrel files: #no-barrel-import" target="_blank" rel="noopener" onclick="event.stopPropagation()">github.com
And check out these ESLint plugins to catch barrels:
Avoid re-exports: npmjs.comΒ
or
#no-re-export" target="_blank" rel="noopener" onclick="event.stopPropagation()">github.com
Avoid imports from barrel files: #no-barrel-import" target="_blank" rel="noopener" onclick="event.stopPropagation()">github.com
npmjs.com/package/eslintβ¦
npm: eslint-plugin-no-re-export
ESLint plugin to disallow re-exporting in TypeScript/JavaScript. Latest version: 0.0.6, last publish...
github.com/gajus/eslint-pβ¦
GitHub - gajus/eslint-plugin-canonical: ESLint rules for Canonical ruleset.
ESLint rules for Canonical ruleset. Contribute to gajus/eslint-plugin-canonical development by creat...
github.com/gajus/eslint-pβ¦
GitHub - gajus/eslint-plugin-canonical: ESLint rules for Canonical ruleset.
ESLint rules for Canonical ruleset. Contribute to gajus/eslint-plugin-canonical development by creat...
github.com/christianvueriβ¦
GitHub - christianvuerings/eslint-plugin-no-re-export
Contribute to christianvuerings/eslint-plugin-no-re-export development by creating an account on Git...
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.
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.
Loading suggestions...