자바스크립트 에코시스템의 속도 향상 - 배럴(Barrel) 파일의 대실패

원문: https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-7/

요약: 많은 프로젝트에 다른 파일을 다시 export하는 파일들로 가득 차 있습니다. 소위 "배럴(Barrel) 파일"이라고 불리는 이런 파일은 대규모 프로젝트에서 자바스크립트 툴이 느려지는 주요 원인 중 하나입니다.

• 파트 1: PostCSS, SVGO 등
• 파트 2: 모듈 해석(resolution)
• 파트 3: eslint를 사용한 린팅
• 파트 4: npm scripts
• 파트 5: draft-js 이모지 플러그인
• 파트 6: 불량해진 폴리필
• 파트 7: 배럴(Barrel) 파일의 대실패

import { foo } from "./some/other-file";

export function myCoolCode() {
  // 아주 똑똑한 코드라고 가정합니다. :)
  const result = foo();
  return result;
}

import { foo } from "./some/other-file";

export function myCoolCode() {
  console.time();
  const result = foo();
  console.timeEnd();
  return result;
}

자세한 정보 수집

배럴 파일 해부

// 이 import 문을 보세요.
import { foo } from "../foo";
import { bar } from "../bar";
import { baz } from "../baz";

// feature/index.js
export * from "./foo";
export * from "./bar";
export * from "./baz";

import { foo, bar, baz } from "../feature";

전부 괜찮지 않습니다.

// a.js
globalThis.foo = 123;

// b.js
console.log(globalThis.foo); // 123 이 로깅되어야 함

// index.js
import "./a";
import "./b";

배럴 파일이 성능에 미치는 영향

• 모듈 500 개: 0.15s \* 100 / 4 = 3.75s 오버헤드
• 모듈 1000 개: 0.31s \* 100 / 4 = 7.75s 오버헤드
• 모듈 10000 개: 3.12s \* 100 / 4 = 1:18m 오버헤드
• 모듈 25000 개: 16.81s \* 100 / 4 = ~7:00m 오버헤드
• 모듈 50000 개: 48.44s \* 100 / 4 = ~20:00m 오버헤드

해야 할 일