Peter Mekhaeil

JavaScript Barrel File

A barrel file is a module that re-exports from other modules:

// ./components/index.js
export { Button } from './Button.js';
export { Anchor } from './Anchor.js';
export { Text } from './Text.js'

Usage:

import { Button, Anchor, Text } from './components';

Performance Impact

Barrel files have an impact on your bundler performance (this is how I came across the term Barrel Files).

  • Next.js recommend to not use them.
  • They make it difficult on bundlers to analyse your code.
  • They risk exporting modules of the same name.
  • They have a chance of circular references.

Read More