번들 최적화 가이드: 웹팩 성능 튜닝 완벽 정복

TUTORIAL

Code Splitting, Tree Shaking, Lazy Loading으로 번들 크기를 70% 줄이고 로딩 속도를 2배 개선하는 방법.

럿지 AI 팀

2025-01-06

15분

번들 최적화 핵심 전략

Code Splitting

Tree Shaking

Lazy Loading

Compression

1. Code Splitting

큰 번들을 작은 청크로 분리하여 필요한 코드만 로드합니다.

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: -10,
        },
        common: {
          minChunks: 2,
          name: 'common',
          priority: -20,
        },
      },
    },
  },
};

2. Tree Shaking

사용하지 않는 코드를 제거하여 번들 크기를 줄입니다.

// package.json
{
  "sideEffects": false
}

// 또는 특정 파일 지정
{
  "sideEffects": [
    "*.css",
    "*.scss"
  ]
}

// ES Module 사용 (Tree Shaking 지원)
import { debounce } from 'lodash-es';  // Good
import _ from 'lodash';  // Bad - 전체 로드

3. Dynamic Import (Lazy Loading)

React.lazy

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

Route-based Splitting

const Home = lazy( () => import('./pages/Home') );

4. Compression & Minification

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

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,  // console.log 제거
            drop_debugger: true,
          },
        },
      }),
    ],
  },
};

최적화 결과

번들 크기

초

초기 로딩

Lighthouse

TTI 개선

분석 도구

webpack-bundle-analyzer

번들 시각화

source-map-explorer

소스맵 분석

bundlephobia

패키지 비용 확인