배포모드 시 HTML, JS, CSS 코드 압축

코드 압축

기본적으로 웹팩의 mode를 production으로 했을 경우 js파일만 파일이 압축된다.

하지만 서비스를 배포하는데 있어서 조금이라도 렌더링속도 개선 및 코드 난독화를 위해서는 js뿐만 아니라 css, html 등 다양한 소스 코드를 압축할 필요가 있다.

 

css코드 압축

css의 경우 css-minimizer-webpack-plugin이라는 플러그인을 다음과 같이 설치하여 사용한다.

npm install --save-dev css-minimizer-webpack-plugin

설명하기에 앞서 이제 webpack.config.js 혹은 webpack.common.js를 웹팩 설정파일이라고 바꿔 칭하겠다.

 

다음과 같이 웹팩 설정파일에 코드를 추가한다.

// ...
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
// ...
module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
    ],
    // ...
  },
  // ...
};

이때 여러 css를 하나의 css 번들링 파일로 생성하는 플러그인인 MiniCssExtractPlugin을 적용한 후에 해야 순조롭게 진행될 것이다.

이제 위의 코드를 작성한 후 웹팩을 실행하면 css번들링 파일의 코드들이 압축된 것을 확인할 수 있다.

 

js코드 압축

위의 설명에서 웹팩의 mode를 production으로 했을 경우 기본적으로 js를 압축한다고 설명하였다.

하지만 optimization.minimizer에 css만 압축하는 플러그인이 들어가 있을 경우 기본적으로 압축해주는 js파일은 압축되지 않는다.

그렇기 때문에 js파일을 압축해주는 플러그인을 따로 설치해야 한다.

그 플러그인 이름은 terser-webpack-plugin이며 다음과 같이 설치한다.

npm install --save-dev terser-webpack-plugin

다음과 같이 웹팩 설정파일에 코드를 추가한다.

// ...
const TerserPlugin = require("terser-webpack-plugin");
// ...
module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      // ...
      new TerserPlugin(),
      // ...
    ],
    // ...
  },
  // ...
};

이제 위의 코드를 작성한 후 웹팩을 실행하면 js번들링 파일의 코드들이 압축된 것을 확인할 수 있다.

그리고 js파일을 압축할 때 옵션으로 console.log를 제거할 수 있다.

 

console.log를 제거하지 않으면 서버와 통신하는 과정에서 응답받는 값이 노출되며 성능 또한 저하된다.

그렇기 때문에 배포 버전에는 로그를 감추는 것이 좋다.

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

이제 설정이 끝났고 웹팩으로 빌드하면 콘솔이 사라진 것을 확인할 수 있다.