코드 압축 (Minifier)
HTML, CSS, JavaScript 코드를 압축합니다
HTML·CSS·JS 중 하나를 고르고 코드를 붙여넣으면 주석과 불필요한 공백을 걷어낸 결과와 함께 원본 대비 몇 바이트, 몇 퍼센트가 줄었는지 보여 줍니다. 변수명을 줄이거나 구문을 재구성하는 본격 번들러가 아니라, 문자열·템플릿 리터럴·정규식 리터럴·주석을 토큰으로 먼저 분리해 그대로 보존하고 그 사이의 공백만 안전할 때 접는 보수적 방식입니다. 그래서 압축률은 terser 같은 도구보다 낮지만, 나눗셈과 정규식을 혼동해 코드를 망가뜨리는 일은 피하도록 설계됐습니다. 정적 페이지에 인라인으로 넣을 짧은 스크립트나 스타일을 가볍게 만들 때 알맞습니다.
이 도구는 인터넷 연결을 끊어도 동작합니다. 입력한 내용과 파일은 이 브라우저 밖으로 나가지 않습니다.
코드 압축, 이렇게 쓰세요
HTML·CSS·JavaScript 의 주석·공백·줄바꿈을 제거해 파일 크기를 줄입니다. 압축 전후 바이트를 비교해 보여 줍니다.
빌드 도구 없이 정적 사이트에 올릴 CSS·JS 를 가볍게 만들거나, 인라인 스타일을 한 줄로 줄일 때 씁니다.
정규식 기반 단순 압축이라 세미콜론이 생략된 JS 는 깨질 수 있습니다. 결과를 반드시 실행해 확인하고, 프로덕션 빌드는 전용 번들러를 쓰세요.
관련 도구
자주 묻는 질문
Q. 압축한 JS 가 실행되지 않아요.
세미콜론이 생략된 코드는 줄바꿈이 문장 구분 역할을 해서 공백을 접으면 의미가 바뀔 수 있습니다. 세미콜론을 명시한 뒤 다시 압축하거나, 프로덕션은 번들러의 minify 를 쓰세요.
Q. 변수 이름도 짧게 바꿔 주나요?
아니요. 이름 변경(mangling)이나 구문 최적화는 하지 않고 공백·주석만 제거합니다. 정규식과 문자열 안의 내용은 손대지 않아 결과가 깨지지 않습니다.
Q. HTML 을 압축하면 pre 나 textarea 안의 공백도 사라지나요?
여러 줄 공백을 접는 과정에서 서식이 중요한 영역이 영향받을 수 있습니다. 코드 예시가 들어간 HTML 은 압축 결과를 브라우저에서 확인한 뒤 쓰세요.