React build 시 source map 제거하기

제거해야 하는 이유 !

create-react-app으로 React 프로젝트를 빌드하여 배포하는 경우, 기본적으로 webpack에 의해 번들링 된 파일과 해당 파일에 대응되는 source map이 생성된다. 다음은 결과 예시이며, *.css.map 과 *.js.map 파일이 source map 이다.

📁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 ✅

source map은 간단히 말하자면, 디버깅을 위한 파일이다. 해당 파일이 있다면 압축되고 난독화된 파일을 브라우저 내에서 다시 원본 소스처럼 확인할 수 있다.

하지만, 실제 배포시 source map은 제거해야한다.

그 이유는 ?!

1. 내부 코드 유출

내부 코드가 그대로 노출되므로, 난독화의 이점을 모두 상실한다. 노출되지 않아야 하는 프로젝트일수록 더욱 치명적일 수 있다.

2. build시 메모리 부족(OOM) 이슈가 발생할 수 있다.

규모가 큰 프로젝트인 경우, 빌드 시 source map까지 생성한다면 메모리 부족 현상이 일어날 수 있다. 이 경우 source map을 생성하지 않도록 빌드 설정을 한다면 문제를 해결할 수 있다.(하지만 source map을 제거하는 것만이 해결 방법이 아닐 수도 있다. source map은 디버깅시 매우 유용하기 때문에, webpack의 devtool 값을 변경하여 온전한 source map(source-map)보다 비용이 낮은 source map(cheap-module-source-map)을 생성하여 문제를 해결할 수 있다. 혹은 node.js의 max_old_space_size 값을 증가시켜 해결할 수도 있다.)

제거하는 방법 !

create-react-app 프로젝트인 경우, source map 제거하는 방법은 간단하다.

1.GENERATE_SOURCEMAP=false

환경변수 GENERATE_SOURCEMAP 의 값을 false로 설정하면 된다. 설정하는 방법은 .env 파일에 GENERATE_SOURCEMAP=false를 추가해서 설정할 수 있지만 , package.json에서 수정해도 된다.

"build": "GENERATE_SOURCEMAP=false react-scripts build"

2.빌드 후 직접 삭제

이 방법은 react-scripts v.1.0.11 이전 버전인 경우에 사용하면 된다.

"build": "react-scripts build && rm build/static/**/*.map"

  이 글은 메모용으로 참고해서 쓴 글입니다.