코드 압축: 뭘 하고 언제 신경 쓸지

JavaScript 파일이 500KB야. 압축 후엔 150KB. 파일의 70%에 무슨 일이 일어난 거야?

대부분 공백, 주석, 긴 변수 이름. 인간에겐 필요하지만 브라우저엔 필요 없는 것들.

압축이 제거하는 것

공백. 들여쓰기, 빈 줄, 추가 공백. 브라우저는 필요 없어.

주석. 개발자에게 유용하지만 브라우저엔 보이지 않아. 사라져.

긴 이름. calculateTotalPrice가 a가 돼. customerData가 b가 돼. 같은 로직, 적은 문자.

죽은 코드. 어떤 압축기는 절대 실행되지 않는 코드를 제거해.

실제 절약

JavaScript:

• 공백과 주석: 30-50% 크기 감소
• 변수 이름 변경: 추가 10-30%
• 죽은 코드 제거: 크게 다양함

CSS:

• 대부분 공백과 주석
• 더 짧은 선택자는 도움이 되지만 위험해 (다른 요소와 일치할 수 있어)

HTML:

• 덜 극적인 이득
• 보통 그냥 공백 제거

언제 압축할까

프로덕션 웹사이트. 항상. 더 빠른 로드 시간, 더 나은 사용자 경험, 낮은 대역폭 비용.

API 응답. 때때로. JSON 압축은 대역폭을 절약하지만 디버깅을 어렵게 만들어.

내부 도구. 아마. 개발 속도가 로드 시간보다 중요할 수 있어.

언제 압축하지 말까

개발 환경. 압축된 코드 디버깅은 고통스러워. 소스맵 유지하거나 개발 중엔 압축하지 마.

가독성 요구사항. 어떤 오픈소스 프로젝트는 교육 목적으로 읽기 쉬운 코드를 유지해.

작은 파일. 1KB 파일 압축은 거의 절약 안 되고 빌드 복잡도를 추가해.

압축을 넘어

Gzip/Brotli 압축. 압축된 코드가 더 압축돼. 대부분의 서버가 자동으로 처리해.

코드 스플리팅. 각 페이지에 필요한 코드만 로딩. 하나의 거대한 압축된 번들보다 나아.

트리 쉐이킹. 번들러가 사용되지 않는 익스포트를 제거해. 필요한 것만 임포트해.

이 기법들이 결합돼. 압축하고, 그다음 압축하고, 그다음 똑똑하게 분할.

소스맵

압축된 코드는 읽을 수 없어. a.b(c,d)는 디버깅 중에 아무것도 알려주지 않아.

소스맵이 압축된 코드를 원본 소스에 다시 연결해. 브라우저 개발자 도구가 압축된 코드를 실행하면서 읽기 쉬운 코드를 보여줘.

개발에선 소스맵 유지. 사용자가 소스 코드를 보는 걸 원하는지에 따라 프로덕션에 배포할지 결정해.

흔한 문제

깨진 변수 이름. 압축기가 때때로 그대로 유지돼야 하는 이름을 망가뜨려 (문자열 안의 API 키처럼). 제외를 설정해.

순서 의존 CSS. 공격적인 CSS 압축은 규칙을 재정렬하고 스타일 캐스케이드 방식을 바꿀 수 있어.

비동기 문제. 공격적인 죽은 코드 제거는 동적으로 로드되는 코드를 깰 수 있어.

배포 전 압축된 빌드 테스트해. 압축 안 된 상태로 작동하는 게 처리 후 깨질 수 있어.

---

압축은 저렴한 성능이야. 빌드 도구가 자동으로 처리해. 한 번 설정하고 영원히 작은 파일을 즐겨.