왜 제거해야 하나요?
create-react-app으로 React 프로젝트를 빌드하여 배포하는 경우, 기본적으로 webpack에 의해 번들링 된 파일과 해당 파일에 대응되는 sourcemap이 생성됩니다. 다음은 결과 예시이며, *.css.map과 *.js.map 파일이 sourcemap입니다.
📁build
├── index.html
├── . . .
└── 📁static
├── 📁css
│ ├── main.58ba45b2.chunk.css
│ └── main.58ba45b2.chunk.css.map 👈
└── 📁js
├── 2.70d883b6.chunk.js
├── 2.70d883b6.chunk.js.LICENSE.txt
├── 2.70d883b6.chunk.js.map 👈
├── main.c855ce40.chunk.js
├── main.c855ce40.chunk.js.map 👈
├── runtime-main.646aaa0a.js
└── runtime-main.646aaa0a.js.map 👈
sourcemap은 간단히 말하면, 디버깅을 위한 파일입니다. 해당 파일이 있다면 압축되고 난독화된 파일을 브라우저 내에서 다시 원본 소스처럼 확인할 수 있습니다.
하지만, 실제 배포 시 sourcemap은 제거되어야 합니다. 그 이유는 다음과 같습니다.
1. 내부 코드가 노출됩니다.
내부 코드가 그대로 노출되므로, 난독화의 이점을 모두 상실합니다. 노출되지 않아야 하는 프로젝트일수록 더욱 치명적일 수 있습니다.
2. 빌드 시 메모리 부족(OOM) 이슈가 발생할 수 있습니다.
규모가 큰 프로젝트인 경우, 빌드 시 sourcemap까지 생성한다면 메모리 부족 현상이 일어날 수 있습니다. 이 경우 sourcemap을 생성하지 않도록 빌드 설정을 한다면 문제를 해결할 수 있습니다. (하지만 sourcemap을 제거하는 것만이 해결 방법이 아닐 수도 있습니다. sourcemap은 디버깅 시 매우 유용하기 때문에, webpack의 devtool 값을 변경하여 온전한 sourcemap(source-map)보다 비용이 낮은 sourcemap(cheap-module-source-map)를 생성하여 문제를 해결할 수 있습니다. 혹은 node.js의 max_old_space_size값을 증가시켜 해결할 수도 있습니다.)
어떻게 제거하나요?
create-react-app 프로젝트인 경우, sourcemap 제거하는 방법은 간단합니다.
1. GENERATE_SOURCEMAP=false
환경변수 GENERATE_SOURCEMAP의 값을 false로 설정하면 됩니다. 설정하는 방법은 .env 파일에 GENERATE_SOURCEMAP=false를 추가해서 설정할 수 있지만, 개인적으로 선호하는 방법은 package.json을 다음과 같이 수정하는 것입니다.
"build": "GENERATE_SOURCEMAP=false react-scripts build"2. 빌드 후 직접 삭제
해당 방법은 react-scripts v1.0.11 이전 버전인 경우에 사용하면 됩니다.
"build": "react-scripts build && rm build/static/**/*.map"참고
