🗜️ 코드 압축기(minify) | 공백 즉시 제거

압축할 CSS 또는 자바스크립트 코드

문자열과 정규식 안의 공백은 그대로 두고 주석만 지웁니다. 한 줄 압축은 세미콜론을 생략한 자바스크립트에서 줄이 붙어 동작이 달라질 수 있으니 CSS에 쓰는 것을 권합니다.

원본 크기 -

압축 후 크기 -

절감량 -

결과

코드 압축기(minify) 사용법

배포용 CSS와 자바스크립트는 들여쓰기와 줄바꿈, 주석을 걷어내면 용량이 줄어 내려받는 시간이 짧아집니다. 이 도구는 두 가지 강도를 제공합니다. 공백 정리는 줄마다 앞뒤 여백과 겹친 공백을 지우고 빈 줄을 없애되 줄바꿈은 살려서 읽을 수 있는 상태를 유지합니다. 한 줄 압축은 줄바꿈까지 없애고 중괄호와 세미콜론, 쉼표, 콜론 주변의 공백도 제거합니다.

단순히 공백을 지우기만 하면 코드가 깨지기 때문에 먼저 코드를 훑어 따옴표 문자열과 백틱 문자열을 통째로 떼어 두고, 그 안의 공백은 손대지 않습니다. 슬래시 두 개와 슬래시 별표로 시작하는 주석은 지우지만, 주소에 들어 있는 프로토콜 슬래시는 주석으로 오해하지 않습니다. 정규식 리터럴도 등호나 괄호, 쉼표 뒤처럼 일반적인 위치에서는 알아보고 내부 공백을 그대로 둡니다.

한계도 분명합니다. 한 줄 압축은 세미콜론을 생략해 쓴 자바스크립트에서 줄이 붙으면서 동작이 바뀔 수 있어 CSS에 쓰는 편이 안전합니다. 변수 이름을 줄이거나 구문을 다시 쓰는 작업은 하지 않으며, HTML 마크업은 대상이 아닙니다. 처리는 브라우저 안에서만 이루어집니다.

자주 묻는 질문

문자열 안의 공백도 지워지나요?

아닙니다. 따옴표와 백틱으로 묶인 문자열은 통째로 떼어 두고 처리하기 때문에 안의 공백과 줄바꿈이 그대로 남습니다.

한 줄 압축 뒤 자바스크립트가 동작하지 않습니다.

세미콜론을 생략해 쓴 코드는 줄바꿈이 문장 구분 역할을 하는데, 한 줄로 합치면 그 구분이 사라집니다. 세미콜론을 넣거나 줄바꿈을 유지하는 공백 정리 버튼을 쓰세요.

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

줄이지 않습니다. 이 도구는 공백과 주석만 정리하며 이름 변경이나 구문 재작성은 하지 않습니다. 그런 최적화는 빌드 단계의 전용 도구가 담당합니다.

코드 압축기(minify) 사용법

자주 묻는 질문

같은 카테고리 도구