JavaScript 압축기 — Terser로 JS 온라인 압축

AWS CloudFront, Cloudflare, Fastly를 통해 배포하는 한국 개발팀은 프로덕션 릴리즈 전 마지막 단계로 JavaScript를 압축합니다. CDN은 전송된 바이트 단위로 요금을 청구하고, Google Core Web Vitals는 매 PageSpeed 실행에서 대용량 JavaScript 페이로드에 감점합니다. 카카오, 네이버, 토스 같은 서비스는 동일한 이유로 기본 압축기로 Terser를 채택합니다: 최신 JavaScript를 예상치 못한 동작 없이 처리하고 동일한 정확도 기준에서 오픈소스 도구 중 가장 작은 출력을 생성합니다.

JavaScript 압축 작동 방식

Terser는 코드의 추상 구문 트리(AST)에서 네 단계로 작동합니다. 각 단계는 독립적이므로 다른 단계에 영향을 주지 않고 켜거나 끌 수 있습니다.

파싱. Terser는 JavaScript를 AST로 파싱합니다. 구문 오류는 원인이 된 토큰과 줄과 함께 여기서 표시되므로, 변환이 실행되기 전에 실제 문제를 찾을 수 있습니다. 파서는 최신 stage-4 제안까지 모든 표준 ECMAScript 구문을 허용합니다.
압축. 압축기는 AST를 순회하며 의미를 보존하는 수십 가지 변환을 적용합니다: 상수 폴딩, 데드 브랜치 제거, 짧은 순수 함수 인라인, 연속 var 선언 축소, 동등한 문장 형식 재작성(if/else를 삼항으로, 비교 체인 단축, 조건부 반환 축소). 모든 변환은 원칙적으로 되돌릴 수 있으며 압축기는 관찰 가능한 동작을 절대 변경하지 않습니다.
맹글링. 맹글러는 각 스코프 내에서 지역 바인딩을 가장 짧은 고유 식별자(a, b, c, …)로 이름을 바꿉니다. 모듈 경계를 벗어날 수 없는 이름만 이름이 바뀌므로 내보낸 바인딩, 속성 키, 전역 참조는 그대로 유지됩니다. 이 단계가 모든 단계 중 가장 큰 바이트 절감을 가져옵니다.
렌더링. Terser는 변환된 AST를 공백이 축소되고 문장 구분자가 문법이 허용하는 최소로 줄어든 JavaScript 문자열로 출력합니다. 라이선스 유지 토글이 /*! … */ 블록을 유지하지 않는 한 주석은 제거됩니다.

JavaScript를 압축하는 이유

빠른 페이지 로드. 더 작은 스크립트가 더 빨리 파싱되고 실행됩니다. 4G 모바일 연결에서 40% 바이트 감소는 Time to Interactive에서 실제 초를 줄이며, 이는 Google PageSpeed Insights가 가장 적극적으로 측정하는 지표입니다.
CDN 출구 비용 절감. CloudFront, Cloudflare, Fastly는 기가바이트당 출구 비용을 청구합니다. 월 수백만 페이지 뷰에서 40% 스크립트 감소는 이미지나 CSS 작업 없이도 실제 절감으로 이어집니다. gzip과 brotli 후에도 수학은 성립합니다 — 압축은 컴프레서가 인코딩해야 할 토큰을 제거합니다.
이 압축기는 당신의 페이지에 부담을 주지 않습니다. Terser는 비압축 시 ~1 MB입니다. 대부분의 온라인 압축기는 페이지 로드 시 전체 라이브러리를 제공하여 자체 Lighthouse 점수를 망치고 사용자가 타이핑하기 전에 페이지가 느리게 느껴지게 합니다. 이 페이지는 압축 버튼을 클릭하거나 실시간 모드를 켤 때만 Terser를 지연 로드합니다 — 초기 렌더가 도구 자체가 달성하도록 약속하는 Core Web Vitals 임계값 이내로 유지됩니다.
Core Web Vitals 통과. Lighthouse와 PageSpeed Insights는 대용량 JavaScript를 Total Blocking Time 저하의 직접적인 원인으로 표시합니다. 벤더 라이브러리와 애플리케이션 번들을 압축하는 것이 Lighthouse의 "사용하지 않는 JavaScript 줄이기" 및 "중복 모듈 제거" 감사에서 가장 빠른 개선책으로 보통 10~20점 개선을 가져옵니다.

주요 활용 사례

JavaScript 압축은 현대 웹 프로젝트의 거의 모든 단계에서 등장합니다.

Pre-commit 훅: 커밋된 아티팩트가 프로덕션 준비 상태이고 diff가 공백 변동보다 로직 변경을 보여주도록 저장소에 커밋하기 전에 개별 유틸리티 스크립트를 압축합니다.
서드파티 위젯 감사: 벤더의 임베드 스니펫을 붙여넣고 수백만 사용자에게 제공하기 전에 이미 압축되어 있는지 또는 더 줄일 수 있는지 확인합니다.
레거시 스크립트 정리: 소스 트리에 손대지 않고 현재 빌드 파이프라인 이전의 오래된 jQuery 플러그인과 직접 작성한 스크립트를 압축합니다.

실제 예시

작은 함수를 예로 들어보겠습니다: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — 주석 포함 약 130바이트. 맹글링과 압축 모두 켠 상태로 위에 붙여넣으세요. 출력은 대략 function add(n,o){return n+o}console.log(add(1,2));로 줄어듭니다 — 약 55바이트, 58% 감소. 함수명 add는 console.log 호출에서 참조되기 때문에 유지됩니다; 매개변수 이름 firstNumber와 secondNumber는 함수 본문에 지역적이어서 한 글자로 줄어듭니다. 맹글링을 끄면 공백을 축소하고 주석을 제거하면서도 읽기 쉬운 매개변수 이름을 유지할 수 있습니다.

FAQ

이것이 브라우저에서 실행되나요?

네. Terser는 처음으로 압축을 클릭하거나 실시간 모드를 활성화할 때 지연 로드됩니다 — 약 200 KB 압축된 파일이 브라우저 캐시에 저장되고 이후 추가 다운로드가 없습니다. 코드는 절대 페이지를 벗어나지 않습니다.

이름 맹글링이란 무엇이며 안전한가요?

맹글링은 바이트를 절약하기 위해 지역 변수를 한 글자로 이름을 바꿉니다. 이름 변경이 스코프를 벗어나지 않기 때문에 독립형 스크립트와 IIFE 번들에서는 안전합니다. 래퍼 없이 이름으로 전역을 노출하는 스크립트(예: window.myLib = …)에서는 안전하지 않습니다. 확실하지 않을 때는 맹글링을 끄세요.

압축 후 코드가 왜 깨지나요?

세 가지 일반적인 원인: 문자열로 변수를 참조하는 eval 또는 with; 원래 식별자에 의존하는 Function.name 또는 arguments.callee 읽기; 또는 이름이 변경된 이름으로 노출된 전역. 먼저 맹글링을 끄고 이름 변경인지 압축 변환인지 원인을 격리하세요.

최신 구문(ES2020+)을 지원하나요?

네. ECMAScript 대상을 ES2020 또는 Next로 설정하면 Terser가 옵셔널 체이닝, 널 병합, 최상위 await, 논리 할당 연산자를 보존합니다. ES5로 설정하면 Terser가 가능한 곳에서 다운 컴파일하지만 완전한 트랜스파일러는 아닙니다 — ES5가 전혀 표현할 수 없는 구문에는 Babel을 사용하세요.

Terser로 브라우저 측 JavaScript 압축을 하면 빌드 도구 없이 프로덕션 품질의 출력을 얻습니다. 스크립트를 붙여넣고, ECMAScript 대상을 선택하고, 결과를 복사하거나 다운로드하세요. 업로드 없음, 계정 없음, 빌드 파이프라인 없음. 압축기 자체는 요청할 때만 로드됩니다 — 이 페이지를 열면 메가바이트가 아닌 수 킬로바이트만 사용합니다.

JavaScript 압축 _

// 관련 도구