자바스크립트 압축 & 포맷터

이 도구는 무엇인가요?

자바스크립트 압축기는 동작은 그대로 유지하면서 코드를 최대한 작게 다시 씁니다. 안전한 범위 내에서 변수명과 함수명을 줄이고, 주석과 공백을 제거하며, 상수를 접고, 도달하지 않는 코드를 제거합니다.

이 도구는 webpack, Vite, Rollup을 비롯한 대부분의 최신 자바스크립트 빌드 툴이 사용하는 AST 기반 압축기 Terser로 만들어졌습니다. 텍스트를 패턴 매칭하는 대신 실제로 코드를 파싱하기 때문에 나누기 연산자와 정규식 리터럴을 정확히 구분하고, //처럼 보이는 문자열이 들어간 템플릿 문자열을 깨뜨리지 않으며, 외부 스코프에 있는 이름과 충돌하는 이름으로 변수를 바꾸지 않습니다.

왜 사용해야 할까요?

• 주요 번들러가 그대로 쓰는 AST 기반 압축 엔진(Terser) — 정규식 리터럴, 템플릿 문자열, 클로저에서도 안전합니다.
• 단순히 공백만 지우는 게 아니라 변수명까지 축약해 실질적인 용량 절감 효과를 냅니다.
• 몇 바이트를, 몇 퍼센트나 줄였는지 정확히 확인할 수 있습니다.
• 포맷 모드는 난독화된 한 줄짜리 압축 JS를 다시 들여쓰기가 적용된 읽기 좋은 코드로 되돌려줍니다 — 서드파티 스크립트를 분석할 때 유용합니다.
• 100% 로컬 처리 — 사내 코드나 미공개 코드가 브라우저 밖으로 나가지 않습니다.

사용 방법

1. 입력창에 자바스크립트를 붙여넣거나 "예제 불러오기"를 눌러 정규식 리터럴과 템플릿 문자열이 포함된 샘플을 확인해보세요.
2. "압축"을 눌러 코드를 줄이거나, "포맷"을 눌러 2칸 들여쓰기로 보기 좋게 만드세요.
3. 입력창 아래 메시지를 확인하세요 — 압축 모드에서는 얼마나 줄었는지 보여주고, 코드에 문법 오류가 있으면 깨진 결과 대신 명확한 오류 메시지를 표시합니다.
4. "복사"를 눌러 결과를 가져가세요.

예시

입력

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

결과

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

변수명이 짧아지고 주석과 if문이 하나의 표현식으로 합쳐졌지만, 정규식 리터럴과 템플릿 문자열은 그대로 보존되며 동작은 전혀 바뀌지 않습니다.

실전 팁

• 직접 손으로 압축하지 말고 빌드 시점에 압축하세요 — 읽기 좋은 원본 소스는 버전 관리에 두고, 압축된 번들은 빌드 단계에서 생성하는 것이 좋습니다.
• 압축된 결과물이 예상과 다르게 동작한다면 Function.prototype.name이나 리플렉션에 의존하는 코드가 있는지 확인하세요 — 이름 축약이 함수 이름을 바꾸면서 드물게 문제가 드러날 수 있습니다.
• 서드파티 스크립트는 읽기 전에 먼저 포맷하는 편이 2,000자짜리 한 줄을 눈으로 파싱하려는 것보다 훨씬 빠릅니다.
• 정적 배포 번들을 준비 중이라면 아래의 HTML, CSS 압축기와 함께 사용해보세요.

실무에서는 이렇게 쓰입니다

자바스크립트는 대체로 페이지에서 렌더링과 파싱을 가장 많이 지연시키는 리소스이기 때문에, 압축하면 HTML이나 CSS보다 바이트당 훨씬 체감되는 로딩 속도 개선 효과가 있습니다. 대부분의 최신 프레임워크는 빌드 시점에 이를 자동으로 처리하지만, 손으로 작성한 스크립트나 브라우저 확장 프로그램, 북마클릿은 누군가 이런 도구로 처리하지 않는 이상 압축되지 않은 채로 배포되는 경우가 많습니다.

포맷 방향은 반대 용도로도 자주 쓰입니다. 압축된 스택 트레이스로 프로덕션 오류를 디버깅할 때, 원래 변수명이 없더라도 주변 코드를 다시 정리해 읽기 좋게 만들면 훨씬 수월하게 원인을 파악할 수 있습니다.

→ HTML 압축기 · CSS 압축기

이럴 때 사용하세요

• 독립 실행형 스크립트나 북마클릿을 공개하기 전에 용량을 줄일 때.
• 실제 사이트에서 가져온 압축 스크립트를 펼쳐서 어떤 동작을 하는지 파악할 때.
• 포럼 글이나 AI가 생성한 코드 조각을 꼼꼼히 읽기 전에 정리할 때.
• 손으로 작성한 JS 조각에 문법 오류가 있는지 빠르게 확인할 때 — 파싱 실패가 명확한 메시지로 바로 드러납니다.

자주 묻는 질문