코드 압축

사용법

1. 코드를 붙여넣으면 언어를 알아서 맞춥니다.
2. 주석과 군더더기 공백이 사라지고 줄어든 비율이 표시됩니다.
3. 결과를 복사해 씁니다. 원본은 따로 보관하세요. 압축된 코드는 고치기 어렵습니다.
4. 코드는 브라우저 밖으로 나가지 않습니다.

이 도구가 하지 않는 것

자주 묻는 질문

압축한 코드가 그대로 동작하나요?

동작합니다. 이 도구는 안전한 변환만 합니다. 주석을 지우고 필요 없는 공백을 없앨 뿐, 변수 이름을 바꾸거나 코드를 재배치하지 않습니다. 문자열·정규식 안쪽은 원문 그대로 보존합니다.

자바스크립트는 왜 줄바꿈이 남나요?

자바스크립트에는 세미콜론 자동 삽입(ASI)이 있어 줄바꿈이 문장의 끝을 뜻하는 경우가 있기 때문입니다. return 다음에 줄을 바꾸면 그 줄에서 함수가 끝나는데, 줄을 합치면 뒤의 값이 딸려 올라가 결과가 달라집니다. 이런 경우를 정확히 가리려면 완전한 문법 분석기가 필요해서, 줄을 합치는 대신 줄별 공백만 정리합니다.

진짜 빌드 도구 대신 써도 되나요?

권하지 않습니다. 실제 배포용 압축은 esbuild나 terser 같은 도구가 변수 이름 축약, 죽은 코드 제거까지 해서 훨씬 많이 줄입니다. 이 도구는 빌드 과정 없이 작은 조각을 빠르게 줄여야 할 때, 또는 압축 전후를 비교해 보고 싶을 때 쓰는 용도입니다.

얼마나 줄어드나요?

내용에 따라 다릅니다. 주석과 들여쓰기가 많은 HTML·CSS는 눈에 띄게 줄어들고, 이미 촘촘한 코드는 거의 줄지 않습니다. 화면에 압축 전후 바이트와 비율을 표시하니 직접 확인하세요. 참고로 서버에서 gzip을 켜면 이런 공백은 어차피 대부분 사라집니다.

HTML의 pre 안쪽도 압축되나요?

되지 않습니다. pre와 textarea는 공백이 화면에 그대로 보이는 태그라 손대면 표시가 달라집니다. 다만 style과 script 안쪽은 각각 CSS·자바스크립트 규칙으로 압축합니다.

함께 쓰면 좋은 도구