JS·CSS 압축
코드를 붙여 넣으면 입력하는 대로 압축본이 나타납니다. 줄어든 글자 수도 함께.
압축 결과
사용 방법
- 상자에 JavaScript나 CSS를 붙여 넣으세요. 입력하는 대로 압축본이 나타나며 누를 버튼은 없습니다.
- 문법을 자동으로 두거나, 감지가 틀렸다면 JavaScript / CSS를 직접 고르세요. 결과는 즉시 다시 그려집니다.
- 머리글에 압축 전 → 후 글자 수가 나옵니다. 출력을 복사하거나 .js / .css 파일로 내려받으세요.
예시
입력
// 무료 배송 배지가 붙은 장바구니 합계 const TAX = 0.08; function total(items, coupon) { let sum = 0; for (const item of items) { sum += item.price * item.qty; } if (coupon) { sum -= coupon; } return { amount: sum * (1 + TAX), freeShipping: sum > 50 }; }
압축 결과
const TAX=0.08;function total(items,coupon){let sum=0;for(const item of items){sum+=item.price*item.qty;}if(coupon){sum-=coupon;}return{amount:sum*(1+TAX),freeShipping:sum>50};}
주석은 사라지고 공백은 줄었지만 모든 식별자는 이름을 유지하고 모든 리터럴은 표기를 지킵니다. 표시는 279 → 177자(−37%)입니다.
규칙, 한계, 알려진 문제
- 공백과 주석만 다룹니다. 이름을 바꾸거나 문장을 접거나 코드를 지우지 않습니다. 그래서 압축 결과는 원본처럼 동작하지만 Terser 결과보다 큽니다.
- /*!나 //!로 시작하는 주석, @license나 @preserve가 들어간 주석은 유지하고 나머지 주석은 지웁니다.
- 줄바꿈을 지우면 프로그램이 달라지는 곳은 그대로 둡니다. return / throw / break / continue / yield / async 뒤, 그리고 JavaScript가 세미콜론을 자동 삽입하는 두 문장 사이(a\nb, x={}\nfoo())입니다. 나머지 코드는 대부분 한 줄이 됩니다.
- JavaScript는 해석하지 않고 토큰으로 나눕니다. 문자열, 정규식, 템플릿 리터럴 안의 "/*"는 건드리지 않습니다. 나눗셈과 정규식은 앞 토큰으로 구별하며 줄을 넘는 정규식은 나눗셈으로 봅니다.
- CSS는 의미가 없을 수밖에 없는 공백만 지웁니다. { } ; , > ~ ! 주변과 ":" 뒤, "}" 앞의 마지막 ";"입니다. 하위 선택자 공백은 유지하고(.a .b를 .a.b로 만들지 않습니다) ":" 앞 공백도 유지하며(a :hover를 a:hover로 만들지 않습니다) calc(100% - 10px)의 공백은 문법의 일부라 남깁니다.
- 이름 바꾸기(mangle), 죽은 코드 제거, drop_console은 하지 않습니다. 동작을 바꾸는 일은 "압축" 버튼이 조용히 할 일이 아니기 때문입니다.
- 미지원: HTML/SVG(공백이 <pre>, <textarea>, 인라인 요소에 좌우됩니다), TypeScript 타입 수준 재작성, JSX/TSX 입력, 소스 맵, 여러 파일 합치기. JSX는 감지해 경고합니다.
- 입력 끝의 닫히지 않은 문자열, 템플릿, 주석, url(은 오류가 아니라 경고이며 나머지 코드는 계속 압축합니다. 괄호 불균형도 경고입니다. 이 도구는 검증기가 아닙니다.
- 글자 수는 바이트나 UTF-16 단위가 아니라 유니코드 코드 포인트로 셉니다. 백분율은 정수로 반올림하고 결과가 늘면 +n%로 표시합니다. 모든 처리가 브라우저에서 이루어지며 아무것도 업로드하거나 저장하거나 URL에 넣지 않습니다.
- 20만 자를 넘으면 입력을 멈추고 약 0.6초 뒤 결과가 갱신되며 텍스트를 잘라 내지 않습니다. 출력은 LF이고 끝에 줄바꿈이 없습니다.
관련 도구
코드를 작게 만든 뒤 흔히 이어서 쓰는 도구입니다.