번들 분석기로 무엇을 봐야 하나요?

큰 node_modules·중복(중복 React)·번들에 들어온 dev 전용 모듈·로케일 전체 import 등을 먹는 상위 항목부터 줄입니다.

Tree Shaking이 안 먹으면?

package sideEffects: false 검토, re-export barrel 최소화, Babel/플러그인이 import를 require로 바꾸지 않는지 확인하세요.

Code Splitting vs 하나의 큰 번들?

캐시 히트·초기 JS·RTT·사용 흐름(라우트)을 함께 봅니다. 과도한 청크는 런타임·워터폴이 느려질 수 있습니다.

빌드 시간만 줄이면 되나요?

CI cache, thread-loader·swc/esbuild loader, resolve alias 중복, 큰 include를 줄이는 것도 함께 하세요.

Webpack 최적화 완벽 가이드 | 번들 크기·빌드 속도·Code Splitting·Tree Shaking

2026년 4월 7일 · 3분 읽기 · 수정 2026년 4월 7일 고급

이 글의 핵심

Webpack 빌드를 최적화하는 완벽 가이드. 번들 크기 줄이기, 빌드 속도 향상, Code Splitting, Tree Shaking, 캐싱까지 실전 예제로 정리. Webpack·Build Tool·Optimization 중심으로 설명합니다.

이 글의 핵심

Webpack 빌드를 최적화하는 완벽 가이드입니다. 번들 크기 줄이기, 빌드 속도 향상, Code Splitting, Tree Shaking, 캐싱까지 실전 예제로 정리했습니다.

실무 경험 공유: 레거시 Webpack 설정을 최적화하면서, 번들 크기를 5MB에서 500KB로 줄이고 빌드 시간을 10분에서 2분으로 단축한 경험을 공유합니다.

들어가며: “Webpack이 너무 느려요”

실무 문제 시나리오

시나리오 1: 번들이 5MB예요

초기 로딩이 10초 걸립니다. 최적화로 500KB, 2초로 단축합니다. 시나리오 2: 빌드가 10분 걸려요

CI/CD가 느립니다. 캐싱과 병렬 처리로 2분으로 단축합니다. 시나리오 3: 모든 코드가 하나의 파일이에요

첫 페이지만 보는데 전체를 다운로드합니다. Code Splitting으로 해결합니다.

1. Webpack이란?

핵심 특징

Webpack은 모듈 번들러입니다. 주요 기능:

번들링: 여러 파일을 하나로
Code Splitting: 필요한 것만 로드
Tree Shaking: 사용 안 하는 코드 제거
로더: CSS, 이미지 등 처리
플러그인: 확장 기능

2. 번들 크기 줄이기

Tree Shaking

// webpack.config.js
module.exports = {
  mode: 'production',  // Tree Shaking 활성화
  optimization: {
    usedExports: true,
  },
};

// package.json
{
  "sideEffects": false  // 모든 파일이 side-effect 없음
}
// 또는 특정 파일만
{
  "sideEffects": ["*.css", "*.scss"]
}

Minification

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,  // console.log 제거
          },
        },
      }),
    ],
  },
};

번들 분석

npm install -D webpack-bundle-analyzer

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

3. Code Splitting

Dynamic Import

// 동적 import
button.addEventListener('click', async () => {
  const module = await import('./heavy-module');
  module.doSomething();
});

React Lazy

import { lazy, Suspense } from 'react';
const Dashboard = lazy(() => import('./Dashboard'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

SplitChunks

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
        },
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

4. 빌드 속도 향상

캐싱

module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
  },
};

thread-loader (병렬 처리)

npm install -D thread-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          'thread-loader',
          'ts-loader',
        ],
      },
    ],
  },
};

불필요한 플러그인 제거

// ❌ 개발에서 불필요
new MiniCssExtractPlugin()  // CSS 추출
// ✅ 프로덕션에만
if (isProduction) {
  plugins.push(new MiniCssExtractPlugin());
}

5. 이미지 최적화

npm install -D image-webpack-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4,
              },
            },
          },
        ],
      },
    ],
  },
};

6. 캐싱 전략

Content Hash

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js',
  },
};

Runtime Chunk

module.exports = {
  optimization: {
    runtimeChunk: 'single',  // 런타임 코드 분리
  },
};

7. 실전 예제: 최적화된 설정

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
  mode: 'production',
  entry: './src/index.tsx',
  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js',
    clean: true,
  },
  cache: {
    type: 'filesystem',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: ['thread-loader', 'ts-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
      new CssMinimizerPlugin(),
    ],
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
        },
      },
    },
    runtimeChunk: 'single',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

정리 및 체크리스트

핵심 요약

Tree Shaking: 사용 안 하는 코드 제거
Code Splitting: 필요한 것만 로드
Minification: 코드 압축
캐싱: 빌드 속도 향상
병렬 처리: thread-loader
번들 분석: webpack-bundle-analyzer

최적화 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

Webpack, Build Tool, Optimization, Performance, Bundle, Frontend

자주 묻는 질문 (FAQ)

Q. Webpack vs Vite, 어떤 게 나은가요?

A. Vite가 훨씬 빠릅니다. 새 프로젝트는 Vite를 권장합니다. 레거시 프로젝트는 Webpack 최적화를 고려하세요.

Q. 번들 크기 목표는?

A. 초기 번들은 200KB 이하를 권장합니다. 전체 앱은 1MB 이하가 이상적입니다.

Q. Tree Shaking이 안 되는 이유는?

A. sideEffects 설정을 확인하세요. 또는 라이브러리가 ESM을 지원하지 않을 수 있습니다.

Q. 빌드 시간을 더 줄일 수 있나요?

A. 캐싱, thread-loader, 불필요한 플러그인 제거를 시도하세요. 또는 Vite로 마이그레이션을 고려하세요.

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「Webpack 최적화 완벽 가이드 | 번들 크기·빌드 속도·Code Splitting·Tree Shaking」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「Webpack 최적화 완벽 가이드 | 번들 크기·빌드 속도·Code Splitting·Tree Shaking」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.

Keyboard Shortcuts

이 글의 핵심

이 글의 핵심

들어가며: “Webpack이 너무 느려요”

실무 문제 시나리오

첫 페이지만 보는데 전체를 다운로드합니다. Code Splitting으로 해결합니다.

1. Webpack이란?

핵심 특징

2. 번들 크기 줄이기

Tree Shaking

Minification

번들 분석

3. Code Splitting

Dynamic Import

React Lazy

SplitChunks

4. 빌드 속도 향상

캐싱

thread-loader (병렬 처리)

불필요한 플러그인 제거

5. 이미지 최적화

6. 캐싱 전략

Content Hash

Runtime Chunk

7. 실전 예제: 최적화된 설정

정리 및 체크리스트

핵심 요약

최적화 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

자주 묻는 질문 (FAQ)

Q. Webpack vs Vite, 어떤 게 나은가요?

Q. 번들 크기 목표는?

Q. Tree Shaking이 안 되는 이유는?

Q. 빌드 시간을 더 줄일 수 있나요?

심화 부록: 구현·운영 관점

내부 동작과 핵심 메커니즘

프로덕션 운영 패턴

확장 예시: 엔드투엔드 미니 시나리오

문제 해결(Troubleshooting)

이 글이 도움이 되셨나요?