기존 상태
기존 라이브러리는 번들러를 사용하지 않았다.
tsc를 사용하여 컴파일만 적용했고
만약 코드 용량이 많아졌을 때 효율이 좋지 않을 수 있다고 생각했다.
타입 스크립트 컴파일러는 Only 컴파일만
타입스크립트의 컴파일러는 TS → JS 트랜스 파일링만을 지원
트리쉐이킹, Minify등을 제대로 지원하지 않는다.
선택한 번들러: tsup
선택 이유
Babel, Rollup 등의 번들러는 러닝커브가 높고 코드의 양이 많지 않아 복잡한 설정이 필요없다.
tsup의 경우 기본적으로 타입스크립트 라이브러리 번들링을 목적으로 한다는 점에 차별점이 있고
esbuild를 기반으로 하고 있어 빠른 속도를 자랑한다.
또한 CommonJS, ESM 문법의 컴파일도 각각 지원하고 무엇보다 간단하게 번들링 설정이 가능하다.
번들러 설정
//tsup.config.ts
export default defineConfig({
entry: ["src/index.ts"], // 루트 entry 파일
outDir: "dist", // 출력 디렉토리
format: ["esm", "cjs"], // ESM + CommonJS 포맷 지원
dts: true, // 타입 선언 파일(.d.ts) 생성
sourcemap: true, // 소스맵 생성
clean: true, // 빌드 전 dist 폴더 정리
target: "es6", // 트랜스파일 대상
minify: true, // JS 파일을 압축(minify) 해서 더 작게 만듭니다.
treeshake: true, //사용하지 않는 코드를 제거합니다. 기본은 true지만 명시
external: ["axios", "react", "react-dom"], //번들에 포함하지 않을 외부 라이브러리 지정
});//package.json
"scripts": {
"build": "yarn tsup"
},결과
tsc 트랜스 파일링 결과
번들링이 되지않음
2.15s
tsup 빌드 결과
1.79s
- 2.15s → 1.79s 단축
- 소스맵이 존재해 에러 발생 시 해당 에러 파일 위치 추적 및 sentry 사용도 가능
- esm 뿐 아니라 cjm도 지원하게됨
- 트랜스파일링 + 번들링 적용해 최적화
FE