자바스크립트 압축
작은 예제가 주석과 공백만 지워 68바이트에서 40바이트로 41.2% 줄어듭니다: function hello(name){return"Hi, "+name;}
사용 방법
- 입력 칸에 자바스크립트 코드를 붙여 넣습니다.
- 남겨야 하는 헤더 주석이 있다면 "라이선스 주석 남기기"를 켜 둡니다. 끄면 모든 주석을 지웁니다.
- 압축 전후 크기를 확인하고 압축된 코드를 복사합니다.
계산 방법
코드를 토큰으로 나눈 뒤, 같은 의미로 읽히는 최소한의 공백만 넣어 다시 이어 붙입니다. 토큰 자체는 바꾸지 않으므로 문자열, 정규식, 템플릿 리터럴, 숫자, 이름이 들어간 그대로 나옵니다.
변수 이름 줄이기, 속성 이름 축약, 죽은 코드 제거, 문법 변환은 하지 않습니다. 그래서 전문 압축 도구보다 절감 폭이 작습니다.
두 토큰이 붙으면 하나로 합쳐지는 곳에는 공백을 남깁니다. "return x", "a in b", "a + +b", "1 .toString()" 같은 경우입니다. 슬래시는 앞 토큰을 보고 정규식인지 나눗셈인지 판단하며, if·while·for 머리의 닫는 괄호 뒤도 처리합니다.
줄바꿈은 프로그램 의미가 바뀔 수 없는 곳에서만 지웁니다. 여는 괄호, 쉼표, 세미콜론, 연산자 뒤가 그렇습니다. 세미콜론 없는 문장 뒤, return 뒤, ( 나 [ 로 시작하는 줄 앞처럼 자바스크립트가 세미콜론을 자동으로 넣을 수 있는 곳에서는 줄바꿈을 남깁니다. 문장마다 세미콜론을 붙인 코드는 아주 적은 줄로 줄어듭니다.
닫히지 않은 문자열·템플릿·주석, 끝까지 닫히지 않는 중괄호가 있으면 경고합니다. 경고가 보이면 원본을 확인하세요.
자주 묻는 질문
압축한 코드도 똑같이 동작하나요?
그래야 정상입니다. 공백과 주석만 바뀌고 토큰은 그대로이며, 자동 세미콜론 삽입이 기대는 줄바꿈도 남깁니다. 다른 빌드 단계와 마찬가지로 배포 전에 결과물로 테스트를 돌려 보세요.
왜 줄바꿈이 일부 남아 있나요?
자바스크립트는 줄바꿈 위치에 세미콜론을 자동으로 넣을 수 있습니다. 세미콜론이 없는 문장을 다음 줄과 이으면 의미가 바뀌거나 문법 오류가 날 수 있어서 줄바꿈을 남깁니다. 원본에 세미콜론을 붙이면 그 줄들도 이어집니다.
Terser나 esbuild처럼 변수 이름도 바꾸나요?
아니요. 공백과 주석만 지웁니다. 가장 작은 번들이 필요하면 실서비스용 빌드 도구를 쓰고, 이 페이지는 짧은 코드 조각, 북마클릿, 크기 확인에 쓰세요.
정규식과 템플릿 리터럴도 제대로 처리하나요?
그렇습니다. /a b[/]/g 같은 정규식과 `x ${ y } z` 같은 템플릿은 그대로 복사하고, ${ } 안의 코드는 압축합니다. 한 가지 예외는 if·while·for 머리가 아닌 닫는 괄호 바로 뒤 줄에서 시작하는 정규식 리터럴인데, 드문 경우입니다.
최신 문법이나 타입스크립트도 되나요?
화살표 함수, 클래스, 옵셔널 체이닝, private 필드 같은 최신 자바스크립트 문법은 읽을 수 있습니다. 의미를 이해할 필요가 없기 때문입니다. 타입스크립트와 JSX는 해석하지 않으므로 타입 표기나 태그는 일반 텍스트처럼 다뤄질 수 있고, 검사하지도 않습니다.
코드가 업로드되나요?
아니요. 모든 처리는 브라우저 안에서 이뤄집니다.