JavaScript 압축은 난독화(obfuscation)와 자주 혼동되지만, 사실 목적이 전혀 다른 별개의 작업입니다. 하나는 바이트를 절약하는 것이고, 다른 하나는 코드의 로직을 이해하기 어렵게 만드는 것입니다.
압축 도구가 하는 일
압축 도구는 공백, 주석, 줄바꿈을 제거하고, 안전한 범위 내에서 지역 변수 이름을 한두 글자로 줄입니다. 프로그램의 로직은 완전히 그대로 유지됩니다 — 이는 순전히 기술적인 파일 압축일 뿐입니다.
JSMin에서 Terser까지, 짧은 역사
2000년대 초 더글러스 크록퍼드(Douglas Crockford)가 공개한 JSMin은 널리 쓰인 초기 JS 압축 도구 중 하나였습니다. 이 도구는 공백과 주석만 제거했을 뿐 변수 이름은 건드리지 않았습니다. Terser(UglifyJS의 포크)나 esbuild 같은 현대적인 도구는 한 걸음 더 나아가 코드를 AST(추상 구문 트리)로 분석한 뒤, 안전한 범위 내에서 지역 변수와 함수 매개변수 이름을 한 글자로 바꿉니다. 실제 프로젝트에서 파일 크기를 가장 크게 줄이는 것은 공백 제거보다 바로 이 변수명 축약 작업입니다.
소스맵: 이름이 바뀐 코드를 디버깅하는 방법
변수 이름이 a, b, c로 줄어들고 모든 줄바꿈이 사라지면, 프로덕션에서 발생한 스택 트레이스는 매우 긴 한 줄 안의 읽기 어려운 위치만 가리키게 됩니다. 소스맵은 이 문제를 해결합니다 — 압축된 코드의 각 위치를 원본 파일의 줄, 열, 변수 이름으로 매핑하는 별도의 파일로, 이를 통해 브라우저 DevTools는 실제로는 압축된 코드가 실행되고 있음에도 읽기 쉬운 스택 트레이스를 보여줄 수 있습니다.
왜 필요한가
- 프로덕션 배포 전 JS 번들의 크기를 줄인다.
- 브라우저에서 스크립트를 다운로드하고 파싱하는 속도를 높인다.
- 압축된 코드는 필요하면 여전히 읽을 수 있지만, 난독화된 코드는 훨씬 더 이해하기 어렵다는 차이를 이해한다.
트리 셰이킹과 압축의 차이
트리 셰이킹(tree shaking)은 압축과 혼동하지 말아야 할 별개의 기법입니다. 모듈 간의 의존성 그래프를 분석해 어디에서도 사용되지 않는 함수와 export를 빌드 시점에 최종 번들에서 완전히 제거합니다. 반면 압축은 이미 완성된 코드를 대상으로 실제로 사용되는 로직은 하나도 지우지 않은 채 그 텍스트 표현만 줄입니다. Vite나 webpack 같은 현대적인 빌드 도구는 보통 두 기법을 순서대로 적용합니다 — 먼저 트리 셰이킹으로 죽은 코드를 제거하고, 그다음 압축으로 남은 코드를 압축합니다.