17. 환경별 설정 (Development, Production) - 3

Webpack의 최적화와 압축

웹팩은 프로젝트를 번들링하고 모듈을 관리하는 강력한 도구이지만, 더 나은 성능을 위해서는 번들된 코드를 최적화하고 압축해야 합니다. 이 글에서는 웹팩을 사용하여 프로젝트를 최적화하고 압축하는 방법에 대해 살펴보겠습니다.

1. Tree Shaking

Tree Shaking은 사용되지 않는 코드를 제거하여 번들 크기를 최소화하는 기술입니다. 주로 ES6 모듈 시스템에서 사용되며, 웹팩 설정에서 다음과 같이 활성화할 수 있습니다.

// webpack.config.js

module.exports = (env, argv) => {
  return {
    // ... 다른 설정
    optimization: {
      usedExports: true,
    },
  };
};

2. 코드 압축

웹팩은 UglifyJS나 Terser와 같은 플러그인을 사용하여 코드를 압축할 수 있습니다. 특히 프로덕션 환경에서 이러한 플러그인을 사용하여 번들된 코드를 최소화합니다.

// webpack.config.js

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

module.exports = (env, argv) => {
  return {
    // ... 다른 설정
    optimization: {
      minimizer: [
        new TerserPlugin({
          // 추가적인 옵션 설정
        }),
      ],
    },
  };
};

3. 코드 분할 (Code Splitting)

웹팩에서 코드 분할을 통해 큰 번들을 여러 개의 작은 번들로 나눌 수 있습니다. 이를 통해 사용자가 필요한 코드만 로드하여 초기 로딩 속도를 향상시킬 수 있습니다.

// webpack.config.js

module.exports = (env, argv) => {
  return {
    // ... 다른 설정
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
  };
};

4. 파일 압축 (Asset Compression)

웹팩은 이미지나 폰트와 같은 정적 에셋을 압축하는데에도 도움을 줍니다. image-webpack-loader, file-loader와 같은 로더를 사용하여 이미지나 폰트를 압축하고 효율적으로 처리할 수 있습니다.

// webpack.config.js

module.exports = (env, argv) => {
  return {
    // ... 다른 설정
    module: {
      rules: [
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader',
            {
              loader: 'image-webpack-loader',
              options: {
                mozjpeg: {
                  progressive: true,
                  quality: 65,
                },
                // 추가적인 설정
              },
            },
          ],
        },
      ],
    },
  };
};

 

웹팩을 통한 최적화와 압축은 성능을 향상시키고 사용자 경험을 개선하는 데에 중요한 역할을 합니다. 위의 기술들을 조합하여 프로젝트의 번들 크기를 최소화하고 빠른 페이지 로딩을 구현하세요.