Softonic

자바스크립트 압축기

단계 1 / 3
다음

JavaScript 코드를 복사하여 공간을 최소화한 버전을 얻으세요. 이 버전은 기존 대비 40~70% 더 작으며, 여백이 제거되고 변수가 단일 문자로 약화되었으며, 불필요한 브랜치가 삭제되고 상수 값이 간소화되었으며(활성화 시) 주석도 제거됩니다. 전체 빌드 툴체인을 사용하지 않는 경우의 신속한 크기 확인, 일회성 삽입 또는 랜딩 페이지에 매우 유용합니다.

자바스크립트를 최소화하는 방법

  1. 1

    원본을 붙여넣기

    유효한 ES5 이상의 자바스크립트 코드입니다. ES6 이상에서는 템플릿 리터럴, 클래스, 모듈 등을 사용하므로 대상 언어가 해당 버전과 일치하는지 확인해야 합니다.

  2. 2

    압축 강도를 선택하세요

    안전 모드(공백 + 주석), 기본 모드(+ 변수명 변경), 공격적 모드(+ 속성명 맹글링, DOM 접근이 깨질 수 있음).

  3. 3

    압축하기

    이 도구는 Terser와 호환되는 변환을 수행하고, 변환 전후의 바이트 수와 함께 결과를 출력합니다.

  4. 4

    복사하거나 다운로드하세요

    출력 결과를 `<script>` 태그에 붙여넣거나, CDN에서 제공하기 위해 `.min.js`로 저장하세요.

바이트는 어디로 사라지는가

일반적인 압축 파일은 원본보다 40~70% 더 작습니다. 여기에 gzip(또는 Cloudflare와 대부분의 CDN이 사용하는 Brotli)으로 압축하면 60~75%가 추가로 줄어듭니다. 둘을 합치면 100KB 원본을 전송 시 약 15~25KB로 보낼 수 있습니다.

원본 압축 후 +gzip +Brotli
jQuery 3.6 87 KB 30 KB 27 KB
Lodash 4.17 71 KB 25 KB 22 KB
React + ReactDOM 18 140 KB 44 KB 39 KB

적용되는 기법

기법 하는 일
공백 제거 공백, 탭, 줄 바꿈을 제거합니다
주석 제거 //와 /* */를 삭제합니다(!important 제외)
변수명 맹글링 userName을 u로 이름 변경(스코프 안전)
속성명 맹글링 obj.foo를 obj.a로 이름 변경(위험)
상수 폴딩 1 + 2 + 3 → 6
데드 코드 제거 return 이후의 분기 삭제
제어 흐름 인라이닝 한 번만 쓰이는 작은 함수를 인라인 처리
문자열 리터럴 압축 반복되는 문자열 상수를 통합

안전 모드 대 공격적 모드

  • 안전 모드는 변수 이름을 그대로 두고 공백만 제거합니다. 읽기 쉬운 스택 트레이스가 필요한 디버깅에 적합합니다.
  • 기본 모드는 로컬 변수는 맹글링하지만 전역 이름과 속성 이름은 유지합니다. 대부분의 코드에서 동작합니다.
  • 공격적 모드는 속성 이름을 포함해 모든 것을 맹글링합니다. 예약 이름을 설정하지 않으면 속성에 동적으로 접근하는 코드(obj["prop"], Object.keys(obj))가 깨지는 경우가 많습니다.

언제 압축하고, 언제 하지 말아야 하는가

  • 프로덕션에서는 브라우저가 내려받는 모든 에셋을 압축하세요.
  • 디버깅 시에도 브라우저 DevTools가 원래 이름을 보여줄 수 있도록 소스 맵을 제공하세요.
  • 개발 단계에서는 압축하지 마세요. 빌드 시간을 낭비하고 읽기 쉬운 오류를 잃게 됩니다.
  • 이미 압축된 코드를 다시 압축하지 마세요. .min.js 파일은 재압축해도 약 1~3%만 줄어드는 반면 깨질 위험이 있습니다.

흔한 실수

  • 예약 이름을 설정하지 않음. 속성 payment_method가 a로 맹글링되면 동적 속성 접근(obj["payment_method"])이 깨집니다.
  • 소스 맵을 잊음. .map 파일이 없으면 프로덕션 오류를 읽을 수 없습니다.
  • CommonJS와 ESM을 함께 압축함. 모듈 방식이 섞여 있으면 압축 전에 세심한 트리 셰이킹이 필요합니다.

자주 묻는 질문

일반적으로 압축하지 않은 상태에서는 파일 크기가 40~70% 줄어들며, gzipped 또는 Brotli로 압축하면 추가로 60~75% 더 소형화됩니다. 100KB 크기의 소스 파일은 전송 시 약 15~25KB로 전달됩니다.

기본(로컬 변수) 맹글링은 거의 항상 안전합니다. 공격적인 속성 맹글링은 속성에 동적으로 접근하는 모든 코드를 깨뜨립니다. 활성화하기 전에 reserved 목록을 신중하게 설정하세요.

네, ‘소스 맵 생성’ 옵션을 켜면 도구가 압축된 코드와 함께 각 바이트를 원본 소스로 되짚어 주는 .map 파일을 반환합니다. 두 파일을 모두 CDN에 업로드하면 DevTools에서 읽기 쉬운 스택 트레이스를 볼 수 있습니다.

네, 최상위 await(top-level await), 클래스 필드, 프라이빗 메서드, 널 병합(nullish coalescing), 옵셔널 체이닝, 숫자 구분자가 모두 지원됩니다. 아주 최신 제안(데코레이터 stage-3 등)은 해당 플래그를 확인하시기 바랍니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이메일 검증기

이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.

이 도구는 다른 언어로도 제공됩니다