빌드시에 console.log를 제거하는 방법

Updated: at 오후 12:27

Vite와 esbuild를 사용하는 프로젝트에서 빌드시에 console.log를 제거하는 방법을 알아봅니다.

목차

펼치기

방법

이 방법은 minify를 하는 과정중에 코드상의 console 관련 호출을 제거하는 방법입니다. vite.config 에는 minify라는 옵션이 있습니다.

vite minify 설명

terser와 esbuild를 사용할 수 있고 기본적으로 esbuild가 사용됩니다. 두 가지 모두 console 관련 호출을 제거하는 옵션을 제공합니다. terser를 사용하게 되면 속도가 느려지긴 하지만, 압축률이 살짝 높아지는 효과가 있기떄문에, 코드의 크기가 더 중요한 경우에 사용할 수 있습니다. 다만 추가로 패키지를 설치해야 하는 단점이 있습니다.

기본 설정된 esbuild를 사용할 경우에는 다음과 같이 사용할 수 있습니다.

// vite.config.js
{
 ...
 esbuild: {
     drop: ['debugger', 'console'],
  },
  ...
}

혹은 console.log만 제거하고 싶다거나, 빌드 모드에 따라 설정을 다르게 하고 싶다면 다음과 같이 설정할 수 있습니다.

// vite.config.js
{
 ...
 esbuild: {
     drop: ['debugger'],
     pure: mode === 'production' ? ['console.log'] : [],
  },
  ...
}

반면 terser를 사용할 경우에는 다음과 같이 설정할 수 있습니다. 우선 terser를 설치해야 합니다.

npm install -D terser
// vite.config.js
{
...
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true, // console을 제거합니다.
          drop_debugger: true, // debugger를 제거합니다.
          pure_funcs: ['console.log', 'console.info', 'console.debug', 'console.trace'],
          // 특정 메소드만 제거 하고 싶을경우
        },
        format: {
          comments: false,
        },
      },
  ...
}

minify

minify는 코드를 압축하는 과정을 말합니다. 코드를 압축하면 코드의 크기가 줄어들어 로딩속도가 빨라지는 효과가 있습니다. 또한 코드의 가독성이 떨어지기 때문에, 디버깅이 어려워지는 단점이 있습니다. 따라서 개발환경에서는 minify를 하지 않는 것이 좋습니다.

주요 기능으로는 코드의 공백을 제거하거나, 주석을 제거하거나, 코드의 중복을 제거하는 등의 기능이 있습니다. 그렇기 때문에 그 과정에서 console.log나 debugger와 같은 코드를 제거하는 기능도 제공합니다.

Pure, Drop

옵션 설정법을 가만히 보면 drop이라는 키워드와 pure라는 키워드가 있습니다.

drop의 경우에는 코드를 파싱하는 과정에서 해당 코드를 완전히 삭제하게 되는것이고, pure의 경우에는 코드를 삭제하는 것이 아닌, 순수한 코드에 대한 힌트를 남겨주게 되어 해당 코드에 대해 최적화를 할 수 있게 됩니다.

pure

pure 옵션의 경우에는 공통의 스펙을 따르고 있는것으로 생각되는데, pure 설정에 console.log를 넣게 되면, 해당 호출 앞에 /* #__PURE__ */나 /* @__PURE__ */ 같은 특수한 주석이 달린것 같은 효과를 내는데, 때문에 minify 과정에서 해당 코드에 대한 최적화(제거)를 진행할 수 있게 되는 것입니다.

단, 해당 주석은 함수의 호출 앞이나, new 연산자 앞에서만 의미가 있기 때문에, debugger와 같은 키워드는 pure로 설정해도 제거되지 않습니다.

*표준스펙은 아닙니다. pure-notation-spec에 따르면 다음과 같이 설명하고 있습니다.

The #PURE notation is used as a comment in JavaScript code and should be placed immediately before the function call or constructor instantiation it refers to. The notation follows the #PURE or the @PURE keyword, enclosed within double underscores and double hashes.

참고