[javascript] Webpack으로 배포 자원 최적화하기

29 Nov 2023

javascript

웹 개발에서 배포 자원의 최적화는 매우 중요합니다. 사용자의 브라우저에 로드되는 자원의 크기를 최소화하고, 페이지 로딩 속도를 향상시키기 위해서는 이러한 최적화 작업이 필요합니다.

Webpack은 모듈 번들러로서, 자바스크립트 애플리케이션의 의존성 관리와 번들링을 효율적으로 처리해줍니다. 이번 블로그에서는 Webpack을 이용하여 배포 자원을 최적화하는 방법을 알아보겠습니다.

1. 압축과 최소화

웹 개발에서 배포 자원을 최적화하는 첫 번째 단계는 자원의 크기를 줄이고 압축하는 것입니다. Webpack에서는 UglifyJS나 Terser 같은 압축 도구를 사용하여 자바스크립트 코드를 압축할 수 있습니다. 또한, css-loader와 csso-loader를 사용하여 CSS 파일을 최소화할 수도 있습니다.

예시 코드:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
  //...
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  //...
};

2. 번들 분할

웹 애플리케이션은 대개 여러 개의 자바스크립트 파일로 구성되어 있습니다. 이러한 파일들은 하나의 번들로 결합되어 사용자에게 전달됩니다. 하지만, 모든 파일을 하나의 번들로 결합하면 번들의 크기가 매우 커져 사용자 경험에 지장을 줄 수 있습니다.

Webpack에서는 번들 분할을 통해 이러한 문제를 해결할 수 있습니다. 특히, 동적 임포트와 코드 스플리팅을 활용하여 번들을 작게 유지하고, 필요할 때 요청하는 방식으로 자원을 로드할 수 있습니다.

예시 코드:

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
  //...
};

3. 압축된 자원 캐싱

압축된 자원은 브라우저 캐시에 저장되어 재사용될 수 있습니다. 이를 활용하기 위해 Webpack에서는 파일명에 해시를 추가하여 자원의 버전을 관리합니다. 이렇게 하면 자원이 변경되었을 때 브라우저가 새로운 버전을 다운로드하게 됩니다.

예시 코드:

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

4. 기타 최적화 작업

Webpack에서 제공하는 다양한 최적화 플러그인을 활용하여 성능을 개선할 수 있습니다. 예를 들어, 이미지 최적화를 위해 image-webpack-loader를 사용하거나, HTML 파일을 압축하기 위해 html-webpack-plugin을 사용할 수 있습니다.

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  //...
  plugins: [
    new ImageMinimizerPlugin({
      minimizerOptions: {
        plugins: [
          ['gifsicle', { interlaced: true }],  // gif 최적화 설정
          ['jpegtran', { progressive: true }], // jpeg 최적화 설정
          ['optipng', { optimizationLevel: 5 }],  // png 최적화 설정
          ['svgo', { plugins: [{ removeViewBox: false }] }] // svg 최적화 설정
        ]
      }
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true,
        removeAttributeQuotes: true,
        minifyCSS: true,
        minifyJS: true
      }
    })
  ],
  //...
};

마치며

Webpack을 이용하여 배포 자원을 최적화하는 방법에 대해 알아보았습니다. 압축, 번들 분할, 압축된 자원 캐싱 및 기타 최적화 작업을 통해 웹 애플리케이션의 성능을 향상시킬 수 있습니다. 이러한 작업은 사용자의 경험을 향상시키고 웹 사이트의 성능을 향상시키는 데 매우 중요합니다. 추가로 더 많은 최적화 작업을 적용해보고 성능을 개선해보세요.