무료 변환기

자바스크립트 축소기

브라우저에서 JavaScript 코드를 즉시 축소하고 압축하세요. 주석을 제거하고, 공백을 축소하고, 파일 크기를 줄이세요. 무료이며 비공개입니다.

여기에 JS 파일을 드래그 앤 드롭하세요.

.js 파일을 지원합니다. 또는 위에 JavaScript를 붙여넣으세요.

또는

이 도구에 대하여

JavaScript 축소는 불필요한 문자를 제거하고 (적절한 축소기를 사용하여) 지역 변수의 이름을 더 짧은 이름으로 변경하여 소스 코드의 크기를 줄입니다. 첫 번째 범주인 공백 및 주석 제거는 간단하고 위험이 없습니다. 두 번째인 변수 이름 바꾸기는 범위 규칙을 이해해야 하며 Terser 및 esbuild와 같은 프로덕션 축소기가 가장 잘 수행하는 작업입니다.

이 도구는 주석 제거, 공백 축소, 중복 세미콜론 제거, 명백한 패턴 단축 등 안전한 축소에 중점을 둡니다. 변수 이름 바꾸기는 보수적입니다. 명확한 범위의 지역 변수만 건드리고 외부에서 참조되는 이름은 그대로 둡니다. 결과는 기능적으로 소스와 동일합니다.

프로덕션 등급 축소를 위해 전용 도구(Terser, esbuild, swc)는 전체 ECMAScript 범위 모델을 이해하고 훨씬 더 작은 출력을 생성합니다. 이 도구는 전체 빌드 설정을 사용할 수 없는 경우 빠른 브라우저 측 축소를 위한 것입니다.

JavaScript를 축소하는 이유

JavaScript 번들은 일반적으로 최신 웹페이지에서 가장 큰 단일 리소스입니다. 축소는 일반적으로 축소되지 않은 소스에 비해 크기를 30-60% 감소시킵니다. gzip 또는 Brotli와 결합하면 감소폭이 다소 줄어들지만 특히 느린 연결을 사용하는 사용자의 경우 측정 가능한 바이트를 절약할 수 있습니다.

더 빠른 JavaScript는 더 빠른 대화 시간을 의미합니다. 작은 스크립트는 더 빠르게 다운로드되고, 더 빠르게 구문 분석되며, 더 빨리 실행됩니다. TTI가 이탈률과 SEO 순위에 영향을 미치는 사이트의 경우 축소는 가장 저렴한 승리 중 하나입니다.

사용 방법

JavaScript를 붙여넣고 더 작은 버전을 얻으세요.

  1. JavaScript 입력 추가: 소스를 입력 영역에 붙여넣거나 .js 파일을 놓습니다. 축소기는 화살표 함수, 템플릿 리터럴, 클래스 및 모듈을 포함한 최신 JavaScript(ES2015+)를 허용합니다.
  2. 옵션을 선택하세요: 기본값은 주석을 제거하고 공백을 축소합니다. 지역 변수 이름 바꾸기는 보수적입니다. 최대 압축이 필요한 경우 보다 적극적으로 이름을 바꿀 수 있습니다.
  3. 축소: 축소기는 소스를 구문 분석하고 공백과 주석을 제거하고 압축된 출력을 내보냅니다. 소스의 구문 오류는 명확한 오류 메시지를 생성합니다.
  4. 출력 사용: 프로덕션에서 스크립트 소스를 바꾸세요. 완전한 최적화를 위해서는 트리 쉐이킹 및 데드 코드 제거를 처리하는 번들러와 함께 사용하세요.

일반적인 사용 사례

기술적인 세부사항

축소기는 ECMAScript 구문을 존중하는 파서를 사용하여 JavaScript를 토큰화합니다. 주석(한 줄 및 여러 줄)은 /*!로 표시된 라이센스 주석을 제외하고 제거됩니다. 접두사. 구문상 필요한 경우(식별자 사이, 키워드 뒤)를 제외하고 공백은 축소됩니다.

보수적인 변수 이름 바꾸기는 간단한 범위에서 지역 변수를 단축합니다. 전역, 내보내기 및 가져온 이름은 이름이 바뀌지 않으므로 외부 참조가 손상됩니다. 심층적인 이름 변경을 위해서는 적절한 모듈 인식 분석과 함께 Terser 또는 esbuild를 사용하십시오.

극단적인 경우: 자동 세미콜론 삽입(ASI)은 축소기가 프로그램 동작 변경을 방지하기 위해 일부 컨텍스트에서 개행 문자를 유지해야 함을 의미합니다. 템플릿 리터럴, 정규식 리터럴 및 JSX(입력에 포함된 경우)는 해당 내용이 압축하기에 안전하지 않을 수 있으므로 정확하게 보존됩니다.

모범 사례

자주 묻는 질문

축소로 인해 코드 작동 방식이 변경됩니까?
아니요. 축소는 실행에 영향을 주지 않는 공백과 주석을 제거합니다. 변수 단축(맹글링)은 지역 변수의 이름을 바꾸지만 동작은 유지합니다. 전역 변수와 내보낸 이름은 그대로 유지됩니다.
개발이나 프로덕션에서 축소해야 합니까?
프로덕션에서는 축소된 코드만 사용하세요. 개발 중에는 읽을 수 있는 원래 코드를 유지하십시오. 대부분의 빌드 도구(Webpack, Vite, esbuild)는 프로덕션 빌드 프로세스의 일부로 자동으로 축소를 처리합니다.
축소와 난독화의 차이점은 무엇인가요?
축소는 형식이 지정된 경우 코드를 기능적으로 읽을 수 있도록 유지하면서 크기를 줄입니다. 난독화는 의도적으로 코드를 이해하기 어렵게 만듭니다(문자열 인코딩, 제어 흐름 평면화). 이 도구는 난독화가 아닌 크기 축소에 중점을 둡니다.
크기 감소는 어느 정도까지 예상해야 합니까?
일반적으로 gzip 이전에는 30-60%입니다. 변수 이름이 길고 주석이 잘 달린 코드는 가장 큰 절감 효과를 볼 수 있습니다. gzip 압축과 결합하면 JavaScript 파일은 원본 소스보다 80-90% 더 작은 경우가 많습니다.
내 코드가 서버에 업로드되나요?
아니요. 축소기는 브라우저에서 실행됩니다.
내 JavaScript는 얼마나 작아질까요?
일반적으로 30~60% 감소합니다. 긴 식별자를 가진 변수가 많은 코드는 더 많이 압축합니다. 표현식이 많은 코드는 압축률이 낮습니다.
손으로 축소해야 하나요?
절대. 소스에서 읽을 수 있는 JavaScript를 유지합니다. 빌드 단계 또는 배포의 일부로 축소를 실행합니다.
TypeScript에서 작동하나요?
TypeScript는 먼저 tsc 또는 esbuild를 사용하여 JavaScript로 컴파일해야 합니다. 일단 컴파일되면 결과 JavaScript가 축소될 수 있습니다.