[Vue.js] console.log 일괄 제거하기

수많은 디버깅을 하다보면, console.log를 미처 지우지 못해서 console.log 창이 지저분해지기도 하고, 디버깅의 편리를 위해 남겨두고 싶기도 한데요. 일일히 지우기도 번거로운 것이 사실입니다. 

 

빌드 시에는 불필요한 수많은 console log들을 일괄적으로 없앨 수 있는 방법 정리해보았습니다. 

 

 

vite.config.js 설정 

export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      },
      format: {
        comments: false
      }
    }
  }
});

 

 

terser 사용을 위한 플러그인 설치

npm install terser -D

 

 

terser 란 ?

Terser는 JavaScript 코드를 최적화하고 압축(minify)하는 도구로 

주요 기능으로는 아래와 같은 기능들이 있습니다. 

 

1) 불필요한 공백, 주석 제거

2) 변수명 축소

3) 디버깅 코드 제거 (console.log 등)