React 번들 최적화: 트리 쉐이킹과 코드 제거 전략

개요

React 앱의 성능은 번들 크기와 직접 연관된다. 번들 사이즈가 커지면 초기 로드와 재시작 성능이 저하되어 사용자 경험이 나빠진다. 이 글은 react 트리쉐이킹 설정과 불필요 코드 제거 webpack 전략을 중심으로, 초보자도 이해하기 쉬운 단계별 접근을 제시한다.

트리 쉐이킹이란 무엇인가

트리 쉐이킹(Tree Shaking)은 사용되지 않는 코드를 번들에서 제거하는 기법이다. ES 모듈(ESM)의 정적 분석을 통해 어떤 함수와 변수가 실제로 사용되는지 판단하고, 사용되지 않는 부분은 최종 번들에서 제외한다. 핵심 조건은 모듈이 정적 임포트 문법을 사용해야 한다는 점이다.

필수 요소

• ESM(import/export) 사용
• 번들러의 최적화 옵션 활성화
• sideEffects 설정으로 예외 처리

실무 적용 순서

아래 절차는 번들 사이즈 줄이기 react 관점에서 우선순위를 둔 실무 체크리스트다.

• 코드베이스를 ESM으로 정리
• package.json의 sideEffects 설정 확인
• Webpack production 빌드와 최적화 옵션 활성화
• 코드 스플리팅과 동적 임포트 도입
• 번들 분석 도구로 결과 검증

구체적 설정 예시

1. package.json의 sideEffects

라이브러리나 애플리케이션의 부수효과 있는 파일을 제외하고는 sideEffects를 false로 표시하면 트리 쉐이킹 효율이 높아진다.

{
  "name": "my-app",
  "version": "1.0.0",
  "sideEffects": [
    "./src/styles/global.css"
  ]
}

2. Webpack 최소 설정

production 모드와 optimization 설정은 dead code 제거를 돕는다.

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    minimize: true,
    minimizer: [new TerserPlugin({ terserOptions: { compress: { dead_code: true } } })],
    splitChunks: { chunks: 'all' }
  }
};

3. React 코드 작성 규칙

트리 쉐이킹을 잘 동작시키려면 명명된 내보내기(named exports)를 선호하고, 기본 내보내기(default export)를 남발하지 않는 편이 좋다.

export function utilA() { /* ... */ }
export function utilB() { /* ... */ }

// 사용 시
import { utilA } from './utils';

코드 스플리팅과 동적 임포트

초기 번들에서 필요하지 않은 모듈은 동적으로 로드하면 초기 로드 부담을 줄일 수 있다. React에서는 React.lazy와 Suspense 또는 dynamic import(...)를 활용한다.

const LazyPage = React.lazy(() => import('./LargePage'));

// <Suspense fallback={...}>
//   <LazyPage />
// </Suspense>

번들 분석과 제거 전략

분석 도구를 통해 실제로 어떤 파일과 라이브러리가 공간을 차지하는지 확인해야 한다. 흔한 도구는 webpack-bundle-analyzer, source-map-explorer이다.

// webpack-bundle-analyzer 설치 및 실행
npm install --save-dev webpack-bundle-analyzer
npx webpack --profile --json > stats.json
npx webpack-bundle-analyzer stats.json

분석 결과 해석

• 큰 라이브러리는 대체 가능한지 검토
• 중복된 유틸이나 폴리필 제거
• 사용 빈도가 낮은 컴포넌트는 동적 로드로 전환

주의사항과 팁

sideEffects를 무분별하게 false로 설정하면 스타일이나 파일 임포트가 누락될 수 있다. 또한 CommonJS 모듈(CJS)은 정적 분석 한계로 트리 쉐이킹에 불리하다. 가능하면 ESM으로 전환하고, 타사 라이브러리의 모듈 형식을 확인한다.

결론

react 트리쉐이킹 설정과 불필요 코드 제거 webpack 전략은 함께 적용될 때 효과가 크다. ES 모듈 사용, sideEffects 관리, production 최적화, 코드 스플리팅, 번들 분석의 순서로 접근하면 번들 사이즈 줄이기 react 목표를 실현할 수 있다. 실무에서는 분석 결과를 기반으로 점진적으로 리팩터링하는 방식이 비용 대비 효율적이다.