JavaScript 압축기
JavaScript 코드를 압축하여 파일 크기를 줄입니다.
JavaScript 압축기 안내
JavaScript 압축 소개
JavaScript 압축(Minification)은 코드의 동작을 그대로 유지하면서 파일 크기만 줄이는 작업입니다. 소스 코드 안에 있는 공백, 줄바꿈, 주석처럼 브라우저 실행에 필요 없는 요소를 제거해서 전송해야 할 데이터양을 줄여줍니다. 프로덕션 배포 전 빌드 과정에서 거의 필수적으로 수행하며, 웹사이트 로딩 속도를 눈에 띄게 개선할 수 있습니다. 현대 웹 개발에서 성능 최적화는 사용자 경험과 검색엔진 순위에 직접적인 영향을 미치며, JavaScript 파일 크기를 줄이는 것은 가장 기본적이면서도 효과적인 최적화 방법 중 하나입니다. 이 도구를 사용하면 복잡한 빌드 도구 설정 없이도 개별 파일을 빠르게 압축할 수 있어, 프로토타입 단계나 소규모 프로젝트에서 특히 유용합니다.
압축과 난독화는 다릅니다
자주 혼동됩니다. 압축(minify)은 공백과 주석을 없애고 변수명을 짧게 줄여 파일 크기를 줄이는 것이고, 난독화(obfuscate)는 일부러 읽기 어렵게 만들어 분석을 방해하는 것입니다.
압축된 코드도 정렬 도구로 펼치면 대체로 읽힙니다. 변수명이 a, b로 바뀌어 불편할 뿐 로직은 그대로 드러납니다. 압축을 코드 보호 수단으로 생각하면 안 됩니다. 브라우저로 전달되는 코드는 원리적으로 감출 수 없으므로, 지켜야 할 로직과 키는 서버에 두어야 합니다.
압축 후 깨지는 경우
대부분 잘 동작하지만 문제가 생기는 패턴이 있습니다.
- 세미콜론 생략 — 줄바꿈에 의존해 문장을 구분하던 코드는 한 줄로 합쳐지면서 의미가 달라질 수 있습니다. 세미콜론을 빠짐없이 쓰는 것이 가장 확실한 예방책입니다.
- 함수 이름에 의존하는 코드 — 변수명이 바뀌므로 함수 이름을 문자열로 참조하거나
Function.name을 쓰는 코드는 오작동합니다. - eval과 with — 압축기가 변수 관계를 정확히 파악할 수 없어 위험합니다. 애초에 쓰지 않는 편이 낫습니다.
- 라이선스 주석 — 오픈소스 라이브러리의 저작권 주석까지 지워지면 라이선스 위반이 될 수 있습니다. 보존해야 할 주석이 있는지 확인하세요.
압축 후에는 반드시 실제 동작을 확인하세요. 문법 오류는 바로 드러나지만 위와 같은 문제는 특정 기능을 써봐야 발견됩니다.
소스맵을 함께 두세요
실제 프로젝트에서는 빌드 도구가 압축과 함께 소스맵을 생성합니다. 압축된 코드와 원본을 연결해 주는 파일로, 이것이 있으면 브라우저 개발자 도구에서 원본 코드 기준으로 디버깅할 수 있습니다.
소스맵 없이 압축된 코드에서 오류가 나면 "1번째 줄 8만 번째 문자"처럼 추적이 거의 불가능한 위치만 알려줍니다. 운영 환경에 배포한다면 소스맵을 생성하는 빌드 도구를 쓰는 편이 낫습니다. 이 도구는 그런 설정 없이 파일 하나를 빠르게 줄여야 할 때 적합합니다.
자주 묻는 질문
얼마나 줄어드나요?
코드 스타일에 따라 다르지만 30~60% 정도가 일반적입니다. 다만 서버가 gzip 압축을 함께 적용하면 실제 전송량 차이는 그보다 작습니다.
압축된 코드를 되돌릴 수 있나요?
정렬은 가능하지만 원래 변수명과 주석은 복원되지 않습니다. 원본을 반드시 따로 보관하고, 저장소에는 원본만 커밋하세요.
코드가 서버로 전송되나요?
전송되지 않습니다. 압축이 브라우저 안에서 이루어집니다.
동작 방식
JavaScript 압축기는 입력된 소스 코드를 문자 단위로 스캔하면서 여러 단계의 변환을 수행합니다. 첫 번째로 주석 제거 단계에서 한 줄 주석(//)과 블록 주석(/* */)을 감지해 제거합니다. 이 과정에서 문자열 리터럴 내부의 주석 패턴은 건드리지 않도록 따옴표 컨텍스트를 추적합니다. 두 번째로 공백 정리 단계에서 연속된 공백, 탭, 줄바꿈을 하나의 공백 또는 완전히 제거합니다. 연산자 주변의 불필요한 공백도 이 단계에서 처리됩니다. 세 번째로 세미콜론 최적화 옵션이 활성화되면 닫는 중괄호 바로 앞의 세미콜론을 제거합니다. JavaScript의 ASI(자동 세미콜론 삽입) 규칙에 따라 대부분의 경우 안전하지만, 일부 엣지 케이스에서는 동작이 달라질 수 있으므로 결과를 반드시 테스트해야 합니다. 압축률은 원본 크기와 결과 크기를 비교해 실시간으로 계산됩니다.