JavaScript 축소 도구
JavaScript 코드를 축소하고 압축합니다
입력 JavaScript
주석과 debugger 문을 제거하고 콘솔 로그는 유지합니다.
브라우저에서 실행됩니다. 코드는 이 기기에만 남습니다.
오류 및 경고
JavaScript 축소 팁
- 배포하기 전에 축소된 JavaScript를 테스트하세요.
- 디버깅을 위해 원본 소스 파일을 보관하세요.
- 코드가 함수 이름이나 클래스 이름에 의존한다면 이름 변환은 신중하게 사용하세요.
- 축소와 함께 gzip 또는 Brotli 압축을 사용하세요.
- 프로덕션에서는 빌드 도구로 축소를 자동화하세요.
축소된 JavaScript
압축 결과
- 원본 크기
- —
- 축소 후 크기
- —
- 절약한 바이트
- —
- 압축률
- —
- 줄 수
- —
전후 비교
변경 전
—
변경 후
—
JavaScript 축소 도구 소개
이 무료 온라인 JavaScript 축소 도구는 공백, 주석, 불필요한 문자를 제거해 JS 코드를 최대한 작게 압축합니다. 업계 표준 JavaScript 압축 엔진인 Terser 기반으로, 화살표 함수, 템플릿 리터럴, 클래스, 구조 분해 등 최신 ES6+ 문법을 처리합니다.
필요에 맞게 세 가지 축소 수준 중에서 선택할 수 있습니다. 안전(Safe) 프리셋은 모든 주석과 변수 이름을 그대로 유지합니다. 권장(Recommended) 프리셋은 주석과 debugger 문을 제거하고 콘솔 로그는 유지합니다. 공격적(Aggressive) 프리셋은 파일 크기를 최대한 줄이기 위해 이름 난독화, 죽은 코드 제거, 콘솔 로그 제거를 모두 적용합니다.
모든 처리는 Terser 라이브러리를 사용해 브라우저에서 직접 실행되며, JavaScript 코드는 어떤 서버에도 업로드되지 않습니다. 원본 크기, 축소된 크기, 절약한 바이트, 압축률, 줄 수 감소를 보여 주는 상세한 압축 통계를 제공합니다. 코드를 붙여 넣고 프리셋을 선택하면 최적화된 JavaScript를 바로 얻을 수 있습니다.
주요 기능
- ES6+ JavaScript 문법을 완전히 지원하는 Terser 기반 축소
- 세 가지 축소 프리셋 제공: 안전, 권장, 공격적 압축 수준
- 도달할 수 없는 코드 경로를 제거하는 죽은 코드 제거
- 선택 가능한 console.log 및 debugger 문 제거
- 최대 압축을 위한 공격적 모드의 변수 이름 난독화(단축)
- 입력하는 동안 디바운스 처리가 적용되는 실시간 자동 축소
- 상세한 압축 통계: 원본 크기, 축소된 크기, 절약한 바이트, 압축률, 줄 수
- 대괄호와 괄호 짝 검사를 포함한 내장 구문 검증
- 기존 스크립트를 처리할 수 있는 JavaScript 파일(.js) 업로드 지원
- 한 번의 클릭으로 클립보드에 복사하고 .js 파일로 다운로드
JavaScript 축소 도구 사용 방법
- 축소 수준 선택: 기본 압축에는 안전, 균형 잡힌 최적화에는 권장, 이름 난독화로 파일 크기를 최대한 줄이려면 공격적을 선택합니다.
- JavaScript 입력: JS 코드를 텍스트 영역에 붙여 넣거나, .js 파일을 업로드하거나, Load Sample을 클릭해 예제를 체험해 보세요.
- 처리 대기: 짧은 지연 후 코드가 자동으로 축소되며, 컴파일 중에는 처리 표시기가 나타납니다.
- 압축 결과 확인: 통계 패널에서 원본 및 축소된 크기, 절약한 바이트, 줄 수를 포함해 파일 크기가 얼마나 줄었는지 확인합니다.
- 복사 또는 다운로드: Copy를 클릭해 축소된 JavaScript를 클립보드에 복사하거나, Download로 .js 파일로 저장합니다.
활용 사례
- 프로덕션 배포: 배포 전에 JavaScript를 축소해 파일 크기를 줄이고 페이지 로딩 속도를 높입니다.
- 성능 최적화: 스크립트를 압축해 Core Web Vitals, Time to Interactive, First Contentful Paint 지표를 개선합니다.
- 대역폭 절감: JS 파일이 작아지면 호스팅 비용과 데이터 전송량이 줄어들며, 트래픽이 많은 웹사이트에서 특히 효과적입니다.
- 모바일 최적화: 압축된 JavaScript는 모바일 네트워크에서 더 빨리 로드되어 모바일 사용자 경험이 향상됩니다.
- 간편한 단발성 축소: 빌드 파이프라인 밖에서 빠르게 최적화해야 할 때 개별 스크립트를 축소합니다.
- 코드 리뷰 및 분석: 압축 통계를 활용해 코드베이스에 최적화 여지가 얼마나 있는지 평가합니다.
- 학습과 실험: 프리셋 수준별로 축소 전후 결과를 비교하며 축소가 어떻게 작동하는지 이해합니다.
자주 묻는 질문
이 도구는 무료인가요?
네, JavaScript 축소 도구는 파일 크기나 축소 횟수에 제한 없이 완전히 무료입니다. 등록이나 계정도 필요하지 않습니다.
내 데이터는 안전한가요?
모든 축소는 Terser 라이브러리를 사용해 브라우저에서 직접 이루어집니다. JavaScript 코드는 어떤 서버로도 전송되지 않으므로 소스 코드의 개인정보와 보안이 완벽하게 지켜집니다.
안전, 권장, 공격적 모드는 어떻게 다른가요?
안전 모드는 모든 주석, 콘솔 로그, 변수 이름을 유지하면서 기본 압축을 수행합니다. 권장 모드는 주석과 debugger 문을 제거합니다. 공격적 모드는 가장 작은 결과물을 위해 이름 난독화, 콘솔 제거, 죽은 코드 제거, 다중 패스 최적화를 적용합니다.
이름 난독화로 코드가 망가질 수 있나요?
이름 난독화는 지역 변수를 더 짧은 이름으로 바꾸며, 대부분의 코드에서는 안전합니다. 하지만 코드가 런타임에 함수나 변수 이름에 의존하는 경우(예: eval이나 리플렉션 사용) 문제가 생길 수 있습니다. 공격적 모드를 사용한 뒤에는 반드시 충분히 테스트하세요.
TypeScript나 JSX도 지원하나요?
이 도구는 표준 JavaScript(ES6+)를 처리합니다. TypeScript와 JSX는 축소하기 전에 먼저 일반 JavaScript로 컴파일해야 합니다. TypeScript 컴파일러나 Babel로 트랜스파일한 다음 결과를 여기에 붙여 넣으세요.
팁과 모범 사례
- 소스 파일은 항상 보관: 원본 축소 전 JavaScript는 버전 관리 시스템에 저장하고, 프로덕션 빌드에서만 축소하세요.
- 소스 맵 생성: 빌드 파이프라인에서 소스 맵을 사용하면 브라우저 개발자 도구에서 축소된 코드를 디버깅할 수 있습니다.
- 축소 후 테스트: 특히 이름 난독화가 포함된 공격적 모드를 사용할 때는 축소된 코드로 테스트 스위트를 항상 실행하세요.
- 서버 압축과 함께 사용: 파일 크기를 최대한 줄이려면 JavaScript 축소를 웹 서버의 gzip 또는 Brotli 압축과 함께 사용하세요.
- 권장으로 시작: 대부분의 프로젝트에서는 권장 프리셋이 안전성과 압축률의 가장 좋은 균형을 제공합니다.
- 프로덕션에서 콘솔 로그 제거: 프로덕션 코드에 남아 있으면 안 되는 console.log 문을 공격적 모드로 자동 제거하세요.