JavaScript 코드 압축

이름 바꾸기, 제거하기, 그리고 절대 건드리면 안 되는 것

세 가지 작업이 이루어지며, 뒤로 갈수록 절약되는 용량도 크고 치러야 할 대가도 큽니다. 공백과 주석 제거는 대가가 없습니다. 죽은 코드, 즉 절대 실행될 수 없는 분기나 값을 넣고 한 번도 읽지 않는 변수도 제거합니다. 그리고 지역 이름을 짧게 줄여, 공들여 지은 calculateMonthlyTotal이 글자 하나가 됩니다. 절약의 대부분이 이 마지막 단계에서 나오고, 결과물을 읽을 수 없게 만드는 것도 이 단계입니다. 배포용으로는 괜찮지만 디버깅에는 쓸모가 없습니다.

외부에서 이름으로 참조하는 것은 바꿀 수 없으며, 이를 잘못 처리하는 것이 압축기가 코드를 망가뜨리는 원인입니다. export한 함수, 문자열로 접근하는 객체 속성, window를 통해 접근하는 모든 것, eval 안에서 쓰는 이름은 모두 그대로 남아야 합니다. 다른 어딘가에서 여러분이 쓴 그 이름으로 찾고 있기 때문입니다. 특히 속성은 기본적으로 건드리지 않습니다. user.emailAddress의 이름을 바꾸면 그 객체를 JSON으로 직렬화하거나 따로 압축된 코드가 읽는 순간 깨집니다.

소스 맵이나 원본을 보관하세요. 이름이 사라지면 실제 사용자에게서 온 스택 트레이스는 함수 t의 48,213번째 글자에서 오류가 났다는 식이 되어 아무것도 알려 주지 않습니다. 소스 맵은 디버거와 오류 보고에서 원래 이름과 줄 번호를 되살려 주며, 개발자 도구를 열 때만 불러오는 별도 파일로 배포되므로 만드는 데 드는 비용도 없습니다.

라이선스 주석은 기본적으로 유지하며, 이는 취향이 아니라 법적인 문제입니다. 많은 오픈 소스 코드가 저작권 고지를 함께 배포한다는 단 하나의 조건으로 자유롭게 사용을 허락하며, MIT와 BSD는 이를 명시하고 있습니다. 서드파티 코드가 들어간 번들에서 이 주석을 지우면, 그 코드를 쓸 수 있게 해 준 라이선스를 위반하게 됩니다. 고작 몇백 바이트입니다.

다른 작업이 필요할 때

이 작업은 브라우저 탭이 아니라 빌드 과정에 속하며, 최신 번들러는 당연하게 이를 처리합니다. esbuild --minify, Rollup, Vite는 빌드할 때 최소화하고 소스 맵을 자동으로 만들며, 무엇보다 트리 셰이킹으로 의존성에서 가져오지 않는 export를 버립니다. 실제 애플리케이션에서는 이쪽이 완성된 파일을 최소화하는 것보다 훨씬 많은 용량을 줄여 줍니다.

최적화하기 전에 먼저 측정하세요. 번들 분석기를 돌려 보면 대개 큰 의존성 하나가 파일 대부분을 차지하고 있습니다. 날짜 라이브러리, 아이콘 세트, 차트 하나 때문에 통째로 들여온 차트 패키지 같은 것입니다. 이를 교체하거나 지연 로딩하는 것이 어떤 최소화보다 효과적이고, 페이지가 필요한 것만 불러오도록 하는 코드 분할은 그 둘보다 더 효과적입니다.