코드 최적화 (Optimization)

프로덕션 레벨에서는 애플리케이션의 로딩 속도를 향상시키고 트래픽 비용을 절감하기 위해 파일 사이즈 최소화, 코드 분할 등을 적극 도입해야 합니다. Webpack은 이를 위한 여러가지 최적화 방안을 제공합니다.

SplitChunks Plugin (코드 스플리팅)

중복되는 디펜던시 모듈을 별도의 덩어리(chunk)로 분리해 번들 사이즈 크기를 줄임으로써 브라우저 캐싱 효율을 극대화할 수 있습니다.

module.exports = {
  // ... 생략 ...
  optimization: {
    splitChunks: {
      chunks: 'all', // 동기, 비동기 모듈을 모두 분리 대상에 포함
    },
  },
};

Terser Plugin (코드 최소화 및 난독화)

Webpack 5에서는 mode: 'production'으로 설정하면 기본적으로 TerserPlugin이 실행되어 JavaScript 코드가 압축되고 난독화됩니다. 추가적인 설정이 필요할 땐 직접 플러그인을 가져와 구성할 수도 있습니다.

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

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true, // 프로덕션에서는 console.log 제거
        }
      }
    })],
  },
};

Tree Shaking

Tree Shaking은 사용되지 않는 죽은 코드(Dead Code)를 빌드 결과물에서 제거하는 기술입니다. ES6 모듈 문법(import/export)을 기반으로 동작합니다. 프로덕션 모드에서는 Webpack 측에서 알아서 Tree Shaking을 수행하며, package.json의 "sideEffects" 속성을 통해 안전하게 제거할 수 있는 파일을 Webpack에 알려줄 수 있습니다.