[React] React build 시 sourcemap 제거하기

왜 제거해야 하나요?

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"

 

 

 

 

[ 관련 글 ]

https://trond-soo.tistory.com/123

[에러] timeago 라이브러리 오류

 

[ Ref ]

• https://github.com/facebook/create-react-app/issues/2787
• https://github.com/webpack/webpack/issues/4727
• 메모리 부족으로 인한 CRA build fail 해결하기 - Yeri Kim - Medium
• 자바스크립트 압축(Minify) / 난독화(Uglify)
• Webpack - 웹팩 환경 세팅하기
• How to not create sourcemap when building from CRA project | J2P Blog

• https://velog.io/@racoon/React-build-%EC%8B%9C-sourcemap-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0