JavaScript 압축기 (JS Minifier)
JavaScript를 붙여넣으면 Terser로 크기를 줄입니다. 죽은 코드를 제거하고, 이름을 짧게 바꾸며, 공백을 없앱니다. 문법 오류는 정확한 행과 열을 알려 줍니다.
브라우저에서 실행가입 불필요업로드 없음
압축 결과
JavaScript 압축기 사용 방법
- JavaScript를 붙여넣거나
.js파일을 엽니다. - 옵션을 고릅니다: 이름 난독화는 지역 변수 이름을 줄이고, 압축은 코드를 더 작은 동등한 코드로 바꾸며, ES 모듈은 최상위
import/export를 허용합니다. - 사용자 브라우저가 지원하는 ECMAScript 타깃을 선택합니다. ES2020은 모든 최신 브라우저에서 안전합니다.
- 출력 아래에서 크기, 절감률, gzip 예상치를 확인합니다.
- 압축된 코드를 복사하거나
output.min.js로 다운로드합니다.
JavaScript 압축기는 무엇을 하나요?
압축(minification)은 동작을 바꾸지 않고 JavaScript를 작게 만듭니다. 이 도구는 webpack, Vite, Rollup에서 쓰이는 압축기인 Terser를 사용하며, 세 가지 변경을 적용합니다.
- 공백과 주석 제거: 들여쓰기, 줄바꿈, 주석은 JavaScript 엔진에 필요하지 않습니다.
- 난독화(mangling):
subtotal같은 지역 변수와 함수 매개변수 이름을 한 글자로 바꿉니다. 전역 이름과 객체 속성은 건드리지 않으므로 공개 API는 그대로 동작합니다. - 압축(compression): 상수 표현식을 계산해 넣고, 도달할 수 없는 코드를 제거하며,
if문을 삼항 연산자로 바꾸고, 짧은 함수를 인라인화합니다.
압축과 gzip, 둘 다 필요한가요?
네. Gzip과 Brotli는 전송 중 반복되는 바이트 패턴을 압축하고, minify는 브라우저가 다운로드·파싱·컴파일해야 할 바이트 자체를 없앱니다. 일반적인 스크립트는 minify로 40~60%, 이어서 gzip으로 다시 60~70% 줄어듭니다. 여기 표시되는 gzip 크기는 서버가 실제로 보낼 크기의 좋은 추정치입니다.
라이선스 주석 유지
많은 오픈 소스 라이선스(MIT, BSD, Apache)는 저작권 고지를 코드와 함께 유지하도록 요구합니다. 관례상 /*!로 시작하거나 @license 또는 @preserve를 포함한 주석은 라이선스 주석 유지가 켜져 있으면 보존됩니다.
직접 압축하지 않아도 되는 경우
프로젝트에서 이미 번들러를 쓰고 있다면 프로덕션 빌드의 압축은 번들러에 맡기고 디버깅용 소스 맵을 생성하세요. 온라인 압축기는 일회성 스크립트, CMS나 태그 매니저용 스니펫, 북마클릿, 코드가 얼마나 작아질 수 있는지 확인할 때 이상적입니다.
자주 묻는 질문
코드가 서버에 업로드되나요?
아니요. Terser는 브라우저 탭 안에서 실행되므로 사내 코드가 컴퓨터 밖으로 나가지 않습니다.
압축하면 코드가 망가질 수 있나요?
Terser는 유효한 JavaScript의 동작을 그대로 유지하는 변환만 적용합니다.
Function.prototype.toString()에 의존하거나 eval을 통해 지역 변수 이름에 의존하는 코드는 영향을 받을 수 있으니, 그런 경우에는 이름 난독화를 끄세요.async/await, 클래스, 옵셔널 체이닝 같은 최신 문법도 지원하나요?
네. Terser는 ES2022+ 문법을 파싱합니다. 타깃 설정은 출력에 쓸 수 있는 문법만 제어하며, 새로운 기능을 이전 문법으로 트랜스파일하지는 않습니다.
minify와 uglify는 무엇이 다른가요?
같은 뜻입니다. UglifyJS가 전통적인 도구였고, Terser는 ES2015+를 완전히 지원하며 계속 관리되는 포크입니다.