[Vite] SourceMap

브라우저에서 제공하는 'DevTools' (개발자 도구)는 개발자에게 다양한 기능들을 제공합니다. Network, Console, Vue개발자의 경우 Chrome Extension Vue.js devtools 확장프로그램을 설치하여 개발 테스트 및 디버깅을 합니다. 

또한 Console에 노출되는 에러의 경우 에러가 발생된 파일의 경로를 노출하고, 클릭 시 개발자 도구 'source' Tab에서 확인가능합니다. 이를 소스 맵이라고 하는데요, 소스 맵(Source Map)은 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능을 제공합니다.

 

해당 기능들은 Production 배포 시에는 보안상의 이슈로 자동으로 노출되지 않습니다. 

// vite.config.ts
export default defineConfig({
  build: {
    sourcemap : false // production default false, true 설정 시 sourcemap 생성
  }
})

PS. 참고로 Vue Devtools의 경우 vue-cli에서 시행착오가 있었는데, process.env.NODE_ENV를 'production'이 아닌 그외 'prd' 'prod'등의 값을 사용 할 경우 Vue Devtools는 사라지지 않는 문제가 있었습니다.