코드 압축(Minify)

JS·CSS·HTML 코드를 압축해 용량을 줄입니다.

언어

JS는 Terser로 정밀 압축합니다. CSS·HTML은 주석·공백 제거 방식의 경량 압축으로, <pre>·<textarea> 같은 공백 보존 영역이 있으면 주의하세요.

개발할 때는 주석과 들여쓰기가 있어야 읽히지만, 브라우저에는 그 문자들이 전부 전송량입니다. 파일 하나로는 티가 안 나도 스크립트와 스타일이 쌓이면 초기 로딩에서 차이가 납니다.

이 도구는 붙여넣은 코드에서 실행에 필요 없는 부분을 걷어내고, 얼마나 줄었는지 함께 보여줍니다.

어떻게 계산되나요

코드를 붙여넣고 언어를 고른 뒤 압축을 누릅니다. 결과와 함께 원본 글자 수, 압축 후 글자 수, 감소율(%)이 표시돼 효과를 바로 확인할 수 있습니다.

언어	처리 내용
JavaScript	공백·주석 제거에 더해 지역 변수명 축약과 불필요한 코드 정리까지 수행
CSS	주석 삭제, 공백 축소, `{ } : ; ,` 주변 공백 제거, 블록 끝 세미콜론 정리
HTML	주석 삭제(조건부 주석은 보존), 태그 사이 공백 제거, 연속 공백 축소

JavaScript는 변수명이 바뀌므로 압축본은 배포용으로만 쓰고 원본을 반드시 따로 보관하세요. HTML은 <pre>처럼 공백이 의미를 갖는 영역까지 줄어들 수 있어, 압축 뒤 화면을 한 번 확인하는 편이 좋습니다.

압축하면 사이트가 얼마나 빨라지나요?

전송량이 줄어드는 만큼 도움이 되지만, 보통은 서버의 gzip·brotli 압축과 이미지 최적화 쪽 효과가 더 큽니다. 함께 적용할 때 체감 차이가 납니다.

압축한 코드를 되돌릴 수 있나요?

`코드 정렬(Beautify)`로 읽기 좋게 펼 수는 있지만 원본으로 복원되지는 않습니다. 축약된 변수명과 삭제된 주석은 되살아나지 않으니 원본 파일을 꼭 보관하세요.

압축 후 스크립트가 동작하지 않습니다

세미콜론을 생략한 코드, 전역 변수 이름에 의존하는 코드, `eval`이나 문자열로 함수를 호출하는 코드에서 자주 생깁니다. 문제가 나는 파일은 압축 대상에서 빼거나 해당 부분을 수정한 뒤 다시 시도하세요.

여러 파일을 한 번에 압축할 수 있나요?

이 도구는 붙여넣은 코드 한 덩어리를 처리합니다. 파일이 많다면 빌드 도구(Vite·웹팩 등)나 배포 단계에서 일괄 처리하는 편이 관리하기 좋습니다.