es build

• RN 기본 번들러인 Metro 는 느리고, 트리 쉐이킹이 없고, 캐시 문제가 있다는 얘기에서 출발했다.
• esbuild 는 Go 로 짜여 있고 병렬로 돌아서 JS 로 만든 번들러보다 수십 배 빠르다.
• Vite 도 개발 서버의 의존성 사전 번들링에 esbuild 를 써 왔다.

알게 된 계기

토스 기술 블로그 글을 읽다가 esbuild 라는 번들링 도구를 알게 됐다.

RN 앱은 기본으로 Metro 라는 번들러가 JS 코드를 하나의 번들로 묶고, 그걸 네이티브 앱에 넣어서 빌드한다.

위 글에서 짚은 Metro 의 문제는 세 가지다. 빌드가 느리고, 트리 쉐이킹이 없어서 안 쓰는 코드까지 번들에 들어가고, 캐시를 지워야 결과가 맞는 경우가 생긴다.

그래서 토스는 Metro 대신 esbuild 로 번들링해서 속도를 끌어올렸다고 한다. 어떤 점이 좋길래 번들러를 갈아탔는지 정리해 봤다.

특징

esbuild 는 JS 와 TS 코드를 아주 빠르게 번들링하고 변환하는 도구다. 파일을 읽어서 파싱하고, 의존성을 따라 묶고, 압축해서 내보내는 과정을 한 번에 처리한다.

타입 검사를 안 하는 건 알고 써야 한다. 빌드는 esbuild 로 빠르게 하고, 타입은 tsc --noEmit 을 따로 돌리는 식으로 나눈다.

공식 벤치마크를 보면 같은 코드를 묶는 데 다른 번들러가 수십 초 걸릴 때 esbuild 는 1초도 안 걸린다.

써 보기

CLI 한 줄로도 되고, 설정이 많아지면 JS API 로 쓴다.

npm i -D esbuild
npx esbuild src/index.tsx --bundle --minify --sourcemap --target=es2020 --outfile=dist/app.js

import * as esbuild from 'esbuild';

await esbuild.build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  minify: true,
  sourcemap: true,
  target: ['es2020'],
  outfile: 'dist/app.js',
});

아직 1.0 전이라 package.json 에서 버전을 고정해 두는 게 좋다. ^0.28.0 은 0.28.x 까지만 올라가서, 0.29 의 깨지는 변경은 자동으로 안 들어온다.