JavaScript 압축 소개

JavaScript 압축(Minification)은 코드의 동작을 그대로 유지하면서 파일 크기만 줄이는 작업입니다. 소스 코드 안에 있는 공백, 줄바꿈, 주석처럼 브라우저 실행에 필요 없는 요소를 제거해서 전송해야 할 데이터양을 줄여줍니다. 프로덕션 배포 전 빌드 과정에서 거의 필수적으로 수행하며, 웹사이트 로딩 속도를 눈에 띄게 개선할 수 있습니다.

이용 가이드

입력창에 압축할 JavaScript 코드를 붙여넣거나, '샘플' 버튼을 눌러 예시 코드를 불러옵니다.
주석 제거, 공백 제거, 세미콜론 최적화 옵션을 필요에 맞게 체크합니다.
'압축하기' 버튼을 클릭하면 하단에 압축된 코드와 통계가 표시됩니다.
'복사' 버튼으로 클립보드에 복사하거나, '다운로드'로 script.min.js 파일을 받을 수 있습니다.

핵심 기능

한 줄 주석(//)과 블록 주석(/* */) 자동 제거
불필요한 공백, 탭, 줄바꿈 제거
닫는 중괄호 앞 세미콜론 최적화 옵션
원본 크기, 압축 크기, 감소율 실시간 표시
압축 결과를 .min.js 파일로 바로 다운로드
코드 입력 시 자동 압축(디바운스 적용)

이런 상황에서 유용해요

웹사이트 배포 전 JS 파일 최적화로 로딩 속도 개선
CDN에 올리기 전 파일 크기를 최소화하여 전송 비용 절감
인라인 스크립트를 HTML에 삽입할 때 불필요한 공백 정리
빌드 도구 없이 빠르게 단일 파일을 압축해야 할 때
코드 리뷰 시 원본과 압축 결과를 비교할 때

궁금한 점 모음

Q: JavaScript 압축과 난독화는 같은 건가요?

다릅니다. 압축(Minification)은 공백과 주석을 제거해 파일 크기를 줄이는 것이고, 난독화(Obfuscation)는 변수명을 변경하고 코드 구조를 뒤섞어 읽기 어렵게 만드는 것입니다. 이 도구는 압축만 수행합니다.

Q: 압축하면 보통 얼마나 줄어드나요?

코드 스타일에 따라 다르지만, 주석과 공백이 많은 코드는 30~60% 정도 크기가 줄어듭니다. 이미 압축된 코드를 다시 압축하면 거의 효과가 없습니다.

Q: 압축한 코드가 제대로 동작하지 않아요.

정규표현식 내부에 주석 패턴이 있거나, 문자열 리터럴 안에 특수 문자가 포함된 경우 압축 과정에서 의도치 않게 변형될 수 있습니다. 압축 후에는 반드시 브라우저에서 테스트하세요.

Q: 세미콜론 최적화란 무엇인가요?

닫는 중괄호(}) 바로 앞의 세미콜론을 제거하는 옵션입니다. JavaScript 엔진이 자동으로 세미콜론을 삽입(ASI)하기 때문에 대부분의 경우 안전하지만, 특수한 패턴에서는 문제가 될 수 있으므로 주의해서 사용하세요.

Q: Gzip 압축과 JS 압축은 어떻게 다른가요?

JS 압축은 코드 자체를 변환하여 크기를 줄이는 것이고, Gzip은 서버에서 전송할 때 파일을 압축하는 것입니다. 둘을 함께 사용하면 최대 효과를 얻을 수 있습니다. 먼저 JS를 압축한 뒤 Gzip으로 전송하는 것이 일반적입니다.

Q: TypeScript나 JSX도 압축할 수 있나요?

이 도구는 순수 JavaScript만 지원합니다. TypeScript(.ts)나 JSX(.jsx)는 먼저 JavaScript로 트랜스파일한 후 압축해야 합니다. Webpack이나 Vite 같은 번들러를 사용하면 이 과정이 자동으로 처리됩니다.

Q: 서버에 코드가 전송되나요?

아닙니다. 모든 압축 작업은 브라우저에서 실행됩니다. 입력한 코드는 서버로 전송되지 않으므로 민감한 코드도 안심하고 사용할 수 있습니다.

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

현재는 한 번에 하나의 코드만 압축할 수 있습니다. 여러 파일을 처리해야 한다면 내용을 순서대로 붙여넣어 압축하거나, 빌드 도구(Webpack, Rollup 등)를 사용하는 것을 권장합니다.

JavaScript 압축기