1. TypeScript 설정 (TSConfig)

2. 번들러 설정 (ESBuild, Rollup, Webpack, Vite 등)

3. ESLint 및 Prettier 설정

번들러 Trend 확인하기

webpack

• 장점:
• 다양한 플러그인과 설정 옵션으로 유연한 확장성을 제공.
• CRA, CNA와 같은 툴에서 기본 빌더로 사용되며 방대한 커뮤니티 지원.
• 코드 분할(Code Splitting)과 캐싱 최적화 등 복잡한 프로젝트에서도 강력한 기능 제공.

• 단점:
• 설정 파일이 복잡하고 관리가 어려울 수 있음.
• 빌드 속도가 느려, 최신 대안과 비교했을 때 상대적으로 부족함.

esbuild

• 장점:
• JavaScript와 TypeScript 트랜스파일링을 초고속으로 지원.
• 간단한 설정만으로 사용할 수 있어 진입 장벽이 낮음.
• 대규모 프로젝트에서도 빠른 빌드 시간 제공.

• 단점:
• 플러그인 생태계가 아직 제한적.
• 복잡하거나 고도로 커스터마이징이 필요한 프로젝트에서는 제약이 있을 수 있음.

Rollup

• 장점:
• ES Module 기반으로 설계되어 불필요한 코드를 제거하는 트리쉐이킹에 강력함.
• 플러그인 생태계가 잘 구축되어 있으며, 특히 라이브러리 번들링에 최적화.
• 결과물 크기를 줄이고 최적화된 번들을 제공.

• 단점:
• 초기 설정이 다소 복잡할 수 있음.
• 웹 애플리케이션보다는 라이브러리 번들링에 더 적합.

비교 포인트

• 속도: esbuild > Rollup > webpack

• 확장성: webpack > Rollup > esbuild

• 라이브러리 번들링: Rollup > esbuild > webpack

• 커뮤니티와 지원: webpack > esbuild > Rollup

정리

Rollup, Esbuild Tree-Shaking 확인

// src/utils.ts
export function usedFunction() {
    console.log("This function is used.");
}

let name;

export function unusedFunction() {
    console.log("This function is not used.");
    console.log(name);
    performSideEffect();
}

function performSideEffect() {
    console.log("Side effect performed!");
}

// src/index.ts
import { usedFunction } from './utils';

console.log(usedFunction());

Rollup 설정

pnpm add -D rollup @rollup/plugin-typescript

import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/rollup-bundle.js',
      format: 'esm',
      sourcemap: true,
    },
  ],
  plugins: [
    typescript(),
  ],
};

pnpm rollup -c

// dist/rollup-bundle.js

function usedFunction() {
    console.log("This function is used.");
}

console.log(usedFunction());
//# sourceMappingURL=rollup-bundle.js.map

Esbuild 설정

pnpm add -D esbuild

// build.mjs

import { build } from 'esbuild';

build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  sourcemap: true,
  treeShaking: true,
}).then(() => console.log('esbuild build finished.'));

node build.mjs

// dist/index.js

// src/utils.ts
function usedFunction() {
  console.log("This function is used.");
}

// src/index.ts
console.log(usedFunction());
//# sourceMappingURL=index.js.map

# 밴치마크 CLI
hyperfine \
  --export-csv result.csv \
  --prepare "rm -rf dist" \
  "pnpm rollup -c" \
  "node build.mjs"

Benchmark 1: pnpm rollup -c
  Time (mean ± σ):     776.1 ms ±  54.7 ms    [User: 1243.3 ms, System: 71.0 ms]
  Range (min … max):   726.2 ms … 894.9 ms    10 runs
 
Benchmark 2: node build.mjs
  Time (mean ± σ):      42.4 ms ±   4.5 ms    [User: 39.6 ms, System: 7.4 ms]
  Range (min … max):    39.5 ms …  60.4 ms    45 runs

Summary
  node build.mjs ran
   18.32 ± 2.33 times faster than pnpm rollup -c

벤치마크 요약

• pnpm rollup -c:
• 평균 실행 시간: 776.1ms (± 54.7ms)
• 실행 범위: 726.2ms ~ 894.9ms
• 총 실행 횟수: 10회

• node build.mjs:
• 평균 실행 시간: 42.4ms (± 4.5ms)
• 실행 범위: 39.5ms ~ 60.4ms
• 총 실행 횟수: 45회

• 비교:
• node build.mjs는 18.32배 더 빠르게 실행됨.

1. 최적화된 트리쉐이킹
Rollup은 ES Module 기반으로 설계되어, 트리쉐이킹에 있어 esbuild보다 더 정교한 결과를 제공합니다. esbuild는 빌드 속도에 초점을 맞추면서도 트리쉐이킹을 지원하지만, 복잡한 의존성 그래프나 라이브러리 번들링의 경우 Rollup이 더 나은 최적화를 제공한다고 느꼈습니다.

2. 라이브러리 배포에 특화된 생태계
Rollup은 라이브러리 번들링에 필요한 다양한 출력 포맷(ESM, CJS, UMD 등)을 쉽게 지원하며, 플러그인 생태계가 이 작업에 매우 최적화되어 있습니다. 반면, esbuild는 웹 애플리케이션과 같은 빠른 개발 환경에 더 적합하며, 복잡한 라이브러리 배포를 처리하기에는 아직 한계가 있다고 판단했습니다.

CRA Webpack을 Rollup으로 마이그레이션 시켜보기

npx create-react-app rollup-migration --template typescript

기본 설치 패키지

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.121",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },

Rollup 설치

npm install -D @rollup/plugin-commonjs @rollup/plugin-html @rollup/plugin-json @rollup/plugin-node-resolve @rollup/plugin-replace @rollup/plugin-typescript rollup rollup-plugin-postcss rollup-plugin-terser

설치 패키지 요약

Rollup 설정

설정 코드

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import json from '@rollup/plugin-json';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import html from '@rollup/plugin-html';
import replace from '@rollup/plugin-replace';

export default {
  input: 'src/index.tsx',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyApp',
    sourcemap: true,
    inlineDynamicImports: true,
  },
  plugins: [
    replace({
      preventAssignment: true,
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
    resolve(),
    commonjs(),
    typescript(),
    json(),
    postcss({
      extract: true,
      minimize: true,
    }),
    html({
      title: 'Rollup Migration',
      template: ({ attributes, files, meta, publicPath, title }) =>
        `<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>${title}</title>
            <link rel="stylesheet" href="${files.css[0].fileName}">
          </head>
          <body>
            <div id="root"></div>
            <script src="${files.js[0].fileName}"></script>
          </body>
        </html>`,
    }),
    terser(),
  ],
};

Rollup 빌드 실행

npm run build

속도 비교

hyperfine \
--export-csv results.csv \
--prepare "rm -rf dist build" \
"npm run build:rollup" \
"npm run build:webpack"

Benchmark 결과 분석

1. 요약

• npm run build:rollup:
• 평균 빌드 시간: 2.342초 ± 0.274초
• 실행 범위: 2.156초 ~ 2.965초
• 총 실행 횟수: 10회

• npm run build:webpack:
• 평균 빌드 시간: 2.934초 ± 0.431초
• 실행 범위: 2.632초 ~ 3.933초
• 총 실행 횟수: 10회

• 결과 비교:
• Rollup 빌드가 Webpack 빌드보다 1.25배 ± 0.24배 더 빠르게 완료되었습니다.

추가 개선

1. 파일 크기 비교:
• Rollup과 Webpack으로 번들된 파일의 크기를 비교하면, Rollup이 더 작은 결과물을 생성합니다. (CRA기준 webpack:563KB, rollup:509KB)

2. 확장성:
• Rollup은 라이브러리 번들링에 적합하지만, Webpack은 애플리케이션 개발에 더 유리합니다.
• Rollup으로 React를 번들링하려니 고려해야할, 설치해야할 라이브러리가 너무 많아 복잡합니다.

보일러플레이트를 위한 번들러