JavaScript 축소기
공백과 주석을 제거하여 JavaScript를 축소
입력
축소된 출력
JavaScript 축소기란?
JavaScript 축소기는 공백, 주석을 제거하고 코드를 단축하여 파일 크기를 줄입니다. 파일이 작을수록 로딩이 빠릅니다. ECMAScript 사양이 언어를 정의하며, 축소는 동작을 유지하면서 출력을 줄입니다. Terser와 UglifyJS 같은 도구가 프로덕션 빌드에서 유사한 기법을 사용합니다.
이 도구는 브라우저에서 완전히 실행됩니다. 서버로 전송되는 데이터가 없습니다. JS를 붙여넣거나 파일을 업로드하면 축소된 출력을 얻을 수 있습니다. 포맷팅(반대 작업)에는 JavaScript 포매터를, 유효성 검사에는 JavaScript 유효성 검사기를, 더 강한 보호를 위해서는 JavaScript 난독화기를 사용하세요.
이 도구 사용 방법
붙여넣기 또는 업로드
왼쪽 패널에 JavaScript를 붙여넣거나 .js 또는 .txt 파일을 업로드하세요. 샘플을 사용하면 예제 코드를 불러올 수 있습니다. 지우기를 사용하면 초기화됩니다.
축소된 출력 확인
오른쪽 패널에 축소된 코드가 표시됩니다. 공백과 주석이 제거됩니다. 잘못된 JS는 오류를 표시합니다.
복사 또는 다운로드
복사 또는 다운로드를 사용하여 축소된 코드를 가져오세요. 프로덕션에서는 gzip 또는 brotli 압축도 함께 사용하는 것을 고려하세요.
JavaScript 축소기 예제
포맷된 JavaScript 코드를 축소하는 예제입니다.
예제: API fetch 함수
포맷된 입력:
축소된 출력:
JavaScript 축소기가 도움이 되는 경우
webpack이나 rollup으로 프로덕션 번들을 준비할 때, 대역폭 절감 또는 로딩 시간 최적화 시 축소로 JS 파일을 줄일 수 있습니다. 빌드 도구와 함께 사용하거나 빠른 확인을 위해 수동으로 사용하세요. 난독화(역분석을 어렵게 하는 것)에는 JavaScript 난독화기를 사용하세요.
자주 묻는 질문
제 데이터는 안전한가요?
네. 축소는 브라우저에서 완전히 실행됩니다. 서버로 전송되는 데이터가 없습니다.
축소기 vs 난독화기?
축소기는 크기를 줄입니다. 난독화기는 코드를 읽기 어렵고 역분석하기 어렵게 만듭니다. 난독화에는 축소가 포함되는 경우가 많습니다.
코드가 망가지나요?
올바른 축소는 동작을 유지합니다. 세미콜론 삽입 및 엣지 케이스에서 문제가 발생할 수 있으니 출력을 테스트하세요.
소스 맵은 어떻게 되나요?
이 도구는 소스 맵을 생성하지 않습니다. 소스 맵이 있는 프로덕션 빌드에는 webpack, rollup 또는 Vite를 사용하세요. 소스 맵에 대한 MDN을 참조하세요.
축소를 되돌릴 수 있나요?
들여쓰기를 추가하려면 JavaScript 포매터를 사용하세요. 주석이나 원래 변수 이름은 복원되지 않습니다.