BlogJavaScriptBarrel 파일을 모두 제거하세요

Barrel 파일을 모두 제거하세요

Barrel 파일이란 무엇인가요?

JavaScript의 배럴 파일은 단일 파일에서 여러 모듈을 그룹화하고 내보내는 방법입니다. 그룹화된 모듈에 액세스할 수 있는 중앙 위치를 제공함으로써 그룹화된 모듈을 더 쉽게 가져올 수 있습니다.

// utils.ts
export { default as util1 } from './util1'
export { default as util2 } from './util2'
export { default as util3 } from './util3'
 
/**
 * other file
 * 내부 구조와 관계없이 모든 모듈을 가져옵니다.
 */
import { util1, util2, util3 } from './utils'

배럴 파일은 관련 모듈에 쉽게 액세스할 수 있는 인터페이스를 제공하여 코드 구성 및 유지 관리성을 향상시킬 수 있습니다. 이로 인해 JavaScript 패키지, 특히 아이콘 및 구성 요소 라이브러리에서 널리 사용됩니다.

Barrel 파일의 문제점은?

// utils.ts
export { default as util1 } from './util1';
export { default as util2 } from './util2';
export { default as util3 } from './util3';
...
export { default as util99 } from './util99';
export { default as util100 } from './util100';
 
// Icons.tsx
export { default as Icon1 } from './Icon1';
export { default as Icon2 } from './Icon2';
export { default as Icon3 } from './Icon3';
...
export { default as Icon99 } from './Icon99';
export { default as Icon100 } from './Icon100';

다음과 같은 Barrel 파일을 프로젝트 전반에서 사용하면 어떤 일이 생길까요?

  1. 복잡한 의존성: 모듈이 서로 다른 Barrel 파일을 통해 임포트되고, 이 Barrel 파일이 또 다른 Barrel 파일을 임포트하는 식으로 복잡한 의존성 구조가 형성됩니다. 이는 거미줄처럼 얽힌 임포트 문을 만들어냅니다.

  2. 모든 모듈 로드: 결국 프로젝트의 모든 파일이 간접적으로 임포트되어, 프로젝트가 커질수록 모든 모듈을 로드하는 데 시간이 더 오래 걸립니다.

  3. 트리쉐이킹 비효율성: 복잡한 의존성 구조와 모든 모듈 로드로 인해, 트리쉐이킹이 제대로 작동하지 않게 되어 사용되지 않는 코드를 제거하는 데 어려움을 겪게 됩니다.

테스트 러너에서의 문제

Jest와 같은 테스트 러너는 각 테스트 파일을 고유한 자식 프로세스에서 실행합니다. 이는 각 테스트 파일마다 모듈 그래프를 처음부터 다시 구성해야 함을 의미합니다. 예를 들어, 모듈 그래프 구성에 6초가 걸리고 테스트 파일이 100개 있는 경우, 총 10분이 낭비됩니다. 이 시간은 테스트나 다른 코드를 실행하지 않고, 단지 소스 코드를 준비하는 데 소요되는 시간입니다.

린트 규칙에서의 문제

배럴 파일 사용은 import 사이클 린트 규칙에 성능 문제를 일으킵니다. 린터는 파일 단위로 실행되므로, 모듈 그래프를 구성하는 비용을 모든 파일에 대해 지불해야 합니다. 이는 대규모 프로젝트에서 린팅 시간이 몇 시간씩 걸리는 문제를 초래할 수 있습니다.

해야할 일

모든 Barrel 파일을 제거하세요.

JavaScript ESM CJSFirst class citizen