Softonic

자바스크립트 압축기

단계 1 / 3

스크립트나 ES 모듈을 최대 1,000,000자까지 붙여넣거나 .js 파일을 여세요.

다음: 옵션 선택

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

적용되는 기법

기법 하는 일
공백 제거 공백, 탭, 줄 바꿈을 제거합니다
주석 제거 //와 /* */를 삭제합니다(/*! 같은 라이선스 주석은 유지 가능)
변수명 맹글링 userName을 u로 이름 변경(스코프 안전)
속성명 맹글링 obj.foo를 obj.a로 이름 변경(위험)
상수 폴딩 1 + 2 + 3 → 6
데드 코드 제거 return 이후의 분기 삭제
제어 흐름 인라이닝 한 번만 쓰이는 작은 함수를 인라인 처리
문장 결합과 불리언 축약 a(); b(); → a(),b();, true → !0

안전 모드 대 공격적 모드

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

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

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

흔한 실수

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

자주 묻는 질문

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

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

네. ‘소스 맵도 생성’을 선택하면 최소화된 코드와 함께 .map 파일을 받을 수 있습니다. 이 파일은 최소화된 코드를 원래의 줄과 이름에 연결하므로 브라우저 DevTools에서 읽기 쉬운 코드와 스택 트레이스를 볼 수 있습니다. 두 파일을 같은 폴더에 두세요. 최소화된 코드 끝에는 파일 이름으로 맵을 찾는 //# sourceMappingURL= 주석이 붙습니다. 맵에는 원본 코드가 들어 있으므로 누구나 그 코드를 읽어도 되는 곳에만 공개하세요.

네. 최상위 await(ES 모듈), 클래스 필드, 프라이빗 메서드, 널 병합 연산자, 옵셔널 체이닝, 숫자 구분자를 지원합니다. 데코레이터는 지원하지 않으므로 TypeScript나 JSX처럼 먼저 일반 JavaScript로 컴파일하세요. 최신 문법을 이전 버전으로 변환하는 일은 없습니다. ECMAScript 버전 옵션은 바이트를 줄이기 위해 최소화된 코드가 사용할 수 있는 가장 최신 문법만 정합니다.

아니요. 붙여넣거나 연 코드는 브라우저 안에서 최소화됩니다. 저희 서버로 전송되지 않으며 페이지 링크에도 추가되지 않습니다. 단계 사이에는 이 탭의 세션 저장소에 보관되며, 탭을 닫으면 브라우저가 지웁니다.

관련 도구

보색 찾기

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

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

텍스트 파일 인코딩 변환기

깨진 문자를 고치기 위해 텍스트를 UTF-8, UTF-16, Latin-1, Windows-1252 등 여러 인코딩 사이에서 변환하세요.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

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