코드 압축(Minification)이 파일에 실제로 하는 일

어떤 대형 웹사이트의 소스 코드를 봐도 압축되고 읽을 수 없는 JavaScript 벽이 보여. 변수 이름은 한 글자야. 공백이 없어. 모든 게 한 줄에 있어.

그게 축소(minify)된 코드야. 그리고 거기엔 충분한 이유가 있어.

축소가 하는 일

축소는 브라우저가 코드를 실행하는 데 필요하지 않은 모든 것을 제거해서 파일 크기를 줄여. 코드는 동일하게 동작해. 그냥 더 작아질 뿐이야.

공백 제거. 코드를 읽기 쉽게 만드는 공백, 탭, 줄바꿈? 브라우저는 신경 안 써. 삭제.

주석 제거. 주석은 사람을 위한 거야. 브라우저는 어차피 건너뛰어. 삭제.

변수 축약. 설명적으로 이름 붙인 userAuthenticationToken이 a가 돼. 코드는 동일하게 작동해.

불필요한 코드 제거. 호출되지 않는 함수, 읽히지 않는 변수, 절대 실행될 수 없는 코드 경로. 고급 축소기가 이걸 감지하고 제거해.

구문 최적화. if (condition) { return true; } else { return false; }가 return condition이 돼. 같은 로직, 더 적은 바이트.

실제 수치

절감 효과는 상당해. JavaScript의 일반적인 축소율:

| 기법 | 크기 감소 | |------|----------| | 공백 + 주석 | 30-40% | | 변수 축약 | 10-20% | | 불필요한 코드 제거 | 5-15% | | 구문 최적화 | 2-5% | | 총합 (gzip 전) | 40-60% | | gzip 압축 적용 시 | 70-85% |

500KB JavaScript 번들은 축소 후 보통 200-300KB가 되고, gzip 후에는 75-150KB가 돼. 매번 페이지 로드마다 실제 대역폭을 절약하는 거야.

CSS도 비슷한 처리를 받아. 공백 제거, 색상 코드 축약(#ffffff를 #fff로), 중복 셀렉터 병합으로 CSS를 보통 30-50% 줄여줘.

개발 vs 프로덕션

축소된 코드로 작업하면 안 돼. 읽을 수 없고 디버깅이 불가능해.

빌드 파이프라인이 이걸 자동으로 처리해야 해:

• 개발: 주석과 설명적 이름이 있는 원본 코드
• 프로덕션: 빌드 도구가 생성한 최적화된 출력

대부분의 현대 프레임워크(Next.js, Vite, webpack)는 기본으로 이걸 해줘. 깔끔한 코드를 쓰면 빌드 도구가 최적화된 출력을 만들어줘. 모두가 행복해.

소스 맵: 축소된 코드 디버깅하기

소스 맵은 축소된 프로덕션 코드와 원본 소스 사이의 다리야. 축소된 코드의 각 위치를 원래 위치로 매핑하는 별도 파일(보통 .map)이야.

프로덕션에서 에러가 발생하면 스택 트레이스가 app.min.js의 1줄, 34872열을 가리켜. 쓸모없지. 하지만 소스 맵이 있으면 브라우저 개발자 도구(또는 에러 추적 서비스)가 원본 파일, 줄 번호, 변수 이름을 보여줄 수 있어.

소스 맵은:

• 빌드 과정에서 생성되어야 하고
• 에러 추적 도구(Sentry, Bugsnag 등)에서 사용 가능해야 하고
• 프로덕션에서 공개적으로 접근 불가능해야 해 (소스 코드가 드러나니까)

축소하면 안 되는 경우

개발 중. 당연히. 코드를 읽고 디버깅해야 하니까.

배포하는 라이브러리. 축소 버전과 비축소 버전 모두 제공해. 소비자가 선택하게 해.

서버 사이드 코드. Node.js는 파일 크기에 신경 안 써. 파일이 한 번만 로드되니까. 서버 코드 축소는 디버깅만 어렵게 만들어.

HTML (보통). HTML 축소의 절감 효과는 작고(10-15%) 가끔 문제를 일으켜. 위험 대비 보상 비율이 좋지 않아. 대부분의 팀이 건너뛰어.

축소를 넘어서

축소는 성능 퍼즐의 한 조각일 뿐이야:

Gzip/Brotli 압축. 서버가 응답을 압축해. 축소와 결합하면 가장 큰 효과를 줘.

코드 분할. 모든 JavaScript를 한 번에 보내지 마. 라우트나 기능별로 분할하고 필요할 때 로드해.

트리 셰이킹. 라이브러리에서 사용하는 함수만 임포트하고 나머지는 번들러가 제거하게 해.

텍스트 비교로 원본과 축소된 코드를 나란히 비교하거나, 글자 수 세기로 정확한 크기 감소를 측정할 수 있어.

---

축소는 공짜 성능 향상이야. 빌드 파이프라인에 한 번 설정하고 잊어버려. 사용자는 더 빠른 로딩을 얻고, 대역폭 비용을 아끼고, 코드는 중요한 곳에서 -- 에디터에서 -- 읽기 쉬운 상태로 남아있어.