JS·CSS 압축기
자바스크립트, CSS, HTML 코드에서 공백과 주석을 지우고 짧게 만들어 용량을 줄여요. 줄어든 용량을 바로 보고 복사하거나 파일로 저장할 수 있어요.
압축 설정
사용 방법
이런 때 쓰면 좋아요
웹사이트에 올리는 자바스크립트와 CSS에는 사람이 읽기 위한 공백, 줄바꿈, 주석이 많아요. 브라우저에게는 필요 없는 부분이라 지우면 파일이 작아지고 페이지가 조금 더 빨리 열려요. 빌드 도구를 쓰지 않는 작은 사이트나 블로그 위젯, 북마클릿을 만들 때 특히 쓸모 있어요.
자바스크립트는 널리 쓰이는 압축 엔진인 terser로 처리해서, 공백만 지우는 것보다 훨씬 작아져요. 지역 변수 이름을 짧게 바꾸고 쓰지 않는 코드도 정리해요. CSS와 HTML은 주석과 불필요한 공백만 안전하게 지우고, 문자열과 pre, textarea, script 안의 내용은 건드리지 않아요.
압축은 코드를 숨기는 기능이 아니에요. 압축한 코드도 정리 도구로 다시 읽을 수 있으니 비밀번호나 API 키 같은 값은 처음부터 클라이언트 코드에 넣지 않는 게 좋아요.
자주 묻는 질문
압축하면 코드가 안 돌아갈 수도 있나요?
terser는 동작을 바꾸지 않는 범위에서만 줄여요. 다만 eval이나 함수 이름(fn.name)에 기대는 코드라면 "변수 이름 짧게 바꾸기"를 끄고 압축해 보세요.
문법 오류가 있다고 나와요.
자바스크립트 문법 오류가 있으면 압축할 수 없어요. 오류 메시지에 줄과 칸 번호가 나오니 그 위치를 고친 뒤 다시 시도하세요.
CSS나 HTML도 변수 이름을 줄이나요?
아니요. CSS와 HTML은 주석, 줄바꿈, 불필요한 공백만 지워요. 클래스 이름 같은 것은 바꾸지 않아요.
코드를 다른 사람이 못 보게 할 수 있나요?
압축은 용량을 줄이는 기능이라 코드 보호 효과는 거의 없어요. 중요한 처리는 서버에서 하는 것이 안전해요.
코드가 서버로 전송되나요?
아니요. 압축 엔진을 브라우저로 내려받아 이 기기 안에서 처리해요.