JS 코드 압축 사이트, 압축률 계산법

자바스크립트 코드를 압축 사이트에 넣었더니 압축률이 20%로 나오기도 하고 60%로 나오기도 한다면, 어느 쪽이 맞는지 헷갈리는 게 정상입니다.

압축률(%)은 압축 전후 코드의 바이트 수를 비교한 숫자일 뿐이고, 도구가 공백·주석만 지우는지 변수 이름까지 바꾸는지에 따라 그 숫자는 달라집니다.

이 글은 압축률이 정확히 어떤 계산으로 나온 숫자인지, 도구마다 결과가 다른 이유를 검증 가능한 방식으로 정리합니다.

요약 ① 압축률(%)은 (1 − 출력 바이트 ÷ 입력 바이트) × 100으로, Blob 기준 텍스트 바이트 수만 비교한 값입니다. ② 공백·주석만 지우는 가벼운 압축 도구는 변수명 축소(mangling)나 죽은 코드 제거(tree-shaking)를 하지 않아, Terser·UglifyJS류와 같은 코드를 넣어도 결과 크기가 다르게 나옵니다. ③ 문자열·템플릿 리터럴·정규식 내부는 건드리지 않으며, 세미콜론을 생략한 코드는 압축 후 실행해 동작을 확인하는 것이 안전합니다.

압축률 숫자가 도구마다 다르게 나오는 이유

같은 JS 파일을 여러 압축 사이트에 순서대로 넣어 보면, 압축률이 20%대로 나오는 곳도 있고 60%를 넘는 곳도 있습니다. 파일은 같은데 숫자만 다르면 계산이 잘못됐나 싶어질 수 있습니다.

원인은 계산 오류가 아니라 도구가 서로 다른 작업을 한다는 데 있습니다. 어떤 도구는 공백과 주석만 지우고, 어떤 도구는 변수명 축소(mangling)와 죽은 코드 제거(tree-shaking)까지 더합니다.

처리 범위가 넓을수록 출력 코드가 작아지고, 압축률 숫자도 커집니다.

이 도구는 공백·주석 제거까지만 하는 쪽입니다. 그래서 변수명을 줄이는 도구와 비교하면 이 도구의 압축률이 더 낮게 나오는 게 정상입니다. 어느 쪽이 더 좋은지가 아니라 하는 작업이 다른 것뿐입니다.

압축률을 도구 없이 직접 계산·검증하는 방법

압축률이 맞는 숫자인지는 도구 없이도 확인할 수 있습니다. 정의 자체가 단순한 바이트 수 비교이기 때문입니다.

1. 원본 바이트 수를 잰다. 브라우저 개발자 도구의 콘솔을 열고 new Blob([코드문자열]).size를 입력하면 그 문자열이 몇 바이트인지 바로 나옵니다. 이 값이 입력 바이트입니다.
2. 주석과 불필요한 공백을 손으로 지운다. //로 시작하는 줄과 /* */로 감싼 구간을 지우고, 줄바꿈과 들여쓰기를 이어 붙입니다. 단, 문자열이나 템플릿 리터럴, 정규식 안의 //나 공백은 데이터이므로 손대지 않습니다.
3. 결과의 바이트 수를 같은 방식으로 잰다. 손으로 압축한 문자열을 다시 new Blob([...]).size에 넣습니다. 이 값이 출력 바이트입니다.
4. 공식을 그대로 적용한다. (1 − 출력 바이트 ÷ 입력 바이트) × 100이 압축률(%)입니다. 손으로 계산한 값과 도구가 보여주는 값이 같다면, 그 도구도 같은 방식으로 계산하고 있다는 뜻입니다.
5. 압축한 코드를 실행해 원본과 같은 동작인지 확인한다. 세미콜론을 생략하고 줄바꿈에 기대어 문장을 구분한 코드(ASI 의존 코드)는 줄바꿈이 사라지며 서로 다른 문장이 한 줄로 붙을 수 있습니다. 압축 전후 코드를 각각 실행해 같은 결과가 나오는지 보는 것이 확인 방법입니다.

여기까지 손으로 해보면 압축률이 무엇을 잰 숫자인지는 전부 확인됩니다. 다만 코드가 길어질수록 문자열·템플릿·정규식 내부는 건드리지 않으면서 공백만 정확히 지우는 작업을 손으로 반복하기는 번거롭습니다.

저희 도구로 확인하기.

직접 해보기 →

자주 헷갈리는 부분

압축률(%)은 이미지나 폰트 압축과는 다른 개념입니다. 여기서 재는 건 Blob size로 구한 JS 텍스트 바이트 수뿐이며, 사진·폰트의 손실·무손실 압축과는 계산 기준이 다릅니다.

압축률은 압축(Minify) 모드에서만 표시됩니다. 정렬(Beautify) 모드는 줄바꿈과 들여쓰기를 더해 읽기 좋게 만드는 작업이라 오히려 바이트 수가 늘어나므로, 절감률이라는 개념 자체가 성립하지 않습니다.

가벼운 압축 도구와 정식 압축기의 차이는 아래와 같습니다.

정규식과 나눗셈 기호는 똑같이 /를 씁니다. 이 도구는 완전한 문법 분석기가 아니라 / 앞 키워드·연산자로 정규식인지 나눗셈인지 판단하며, 대부분 정확히 구분됩니다.

정리

• 압축률(%)은 (1 − 출력 바이트 ÷ 입력 바이트) × 100으로 계산되는, 텍스트 바이트 수 비교 값입니다.
• 이 값은 압축 모드에서만 표시되고, 정렬 모드에는 표시되지 않습니다.
• 공백·주석만 지우는 도구는 변수명 축소나 죽은 코드 제거를 하지 않아 정식 압축기와 결과 크기가 다르게 나옵니다.
• 문자열·템플릿 리터럴·정규식 내부는 별도로 인식해 건드리지 않습니다.
• 압축 결과는 배포하기 전에 실행해서 원본과 같은 동작인지 확인하는 것이 안전합니다.

자주 묻는 질문

압축률은 정확히 어떻게 계산되나요?

입력 코드와 출력 코드를 각각 Blob으로 만들어 바이트 수를 구한 뒤, (1 − 출력 바이트 ÷ 입력 바이트) × 100으로 계산합니다.

글자 수가 아니라 바이트 수 기준이라, 한글이나 특수문자가 섞이면 문자 하나가 여러 바이트를 차지할 수 있습니다.

변수 이름도 짧게 줄여주나요?

아니요. 이 도구는 공백·주석 제거 수준의 가벼운 압축만 하며, 식별자 축소(mangling)나 트리셰이킹은 하지 않습니다. 그래서 결과 코드에서도 원래 변수 이름을 그대로 볼 수 있습니다.

압축한 코드를 그대로 배포해도 되나요?

대부분의 코드에서는 문제가 없습니다. 다만 세미콜론을 생략해 줄바꿈에 기대어 문장을 구분한 코드는 압축 과정에서 줄바꿈이 사라지며 드물게 동작이 달라질 수 있습니다.

압축 후에는 결과 코드를 실제로 실행해 원본과 같은 동작인지 확인하는 것이 안전합니다.

문자열이나 정규식 내부가 잘못 바뀌는 경우는 없나요?

이 도구는 따옴표로 감싼 문자열, 백틱으로 감싼 템플릿 리터럴(중첩된 ${...}까지 추적), 정규식 리터럴, //와 /* */ 주석을 구분해서 인식합니다.

이 구간 안의 내용은 압축·정렬 과정에서 건드리지 않고 그대로 둡니다.