JavaScript 압축기

JavaScript 파일을 줄이고 얼마나 절감됐는지 바로 확인하세요.

브라우저에서 실행됩니다. 입력한 내용은 어디로도 전송되지 않습니다.

JavaScript 압축 방법

  1. JavaScript를 붙여넣으세요.
  2. 읽기 쉬운 상태를 유지하려면 '압축'이나 '변수명 줄이기'를 끄세요.
  3. 압축된 파일을 복사하거나 다운로드하세요.

압축과 변수명 줄이기가 각각 하는 일

옵션하는 일
압축쓰이지 않는 코드를 없애고 식을 단순화
변수명 줄이기지역 변수를 a, b, c 같은 짧은 이름으로 변경

어느 쪽이든 그대로 남는 것

  • 겉으로 드러나는 동작: 같은 입력이면 여전히 같은 출력이 나옵니다.
  • 사용자에게 보이는 텍스트를 포함해 코드 안의 모든 문자열.
  • 연산이 실행되는 순서.
  • /*! ... */ 형태의 주석. Terser는 기본적으로 이 형식을 유지하며, 많은 라이브러리가 라이선스 표시에 쓰는 관례입니다.

JavaScript 압축 팁

  • 운영 환경 오류를 읽을 수 있도록 압축하지 않은 사본을 남기거나 빌드 도구에서 소스맵을 생성하세요.
  • 다른 개발자가 읽을 라이브러리라면 '변수명 줄이기'를 꺼서 오류 메시지에 의미 있는 이름이 남도록 하세요.
  • 널리 쓰이는 압축기라도 드문 예외 상황은 있을 수 있으므로 배포 전에 압축된 결과물로 테스트를 실행하세요.

JavaScript 압축기 자주 묻는 질문

압축된 JavaScript도 여전히 유효한 코드인가요?

네. 이름이 짧아지고 불필요한 공백이 없어질 뿐, 원본과 완전히 똑같이 동작합니다.

JavaScript는 보통 얼마나 작아지나요?

원본에 주석과 긴 변수명이 얼마나 많은지에 따라 다르지만, 흔히 30~60% 작아집니다.

코드에 구문 오류가 있으면 어떻게 되나요?

오류가 발생한 줄과 열이 함께 표시되므로 고친 뒤 다시 시도할 수 있습니다.

'압축'과 '변수명 줄이기'는 어떻게 다른가요?

압축은 코드를 다시 써서 쓰이지 않는 분기를 없애고 식을 단순화합니다. 변수명 줄이기는 지역 변수 이름을 한 글자로 바꿉니다. 둘 중 하나만 꺼도 됩니다.

async나 화살표 함수 같은 최신 문법도 압축할 수 있나요?

네, 옵셔널 체이닝이나 async, await 같은 ES2020 이후 문법도 포함해서 지원합니다.

어떤 압축기를 쓰나요?

UglifyJS의 표준 후속작인 Terser입니다. webpack, Rollup, esbuild를 비롯한 대부분의 번들러가 기본으로 쓰는 압축기입니다.

압축 때문에 코드가 망가질 수도 있나요?

일반적인 코드에서는 동작이 바뀌지 않습니다. 다만 비표준적인 인트로스펙션 기법 등으로 실행 중에 함수나 변수의 원래 이름을 읽는 코드는 이름이 줄어들면 망가질 수 있습니다. 해당된다면 '변수명 줄이기'를 끄세요.

TypeScript 문법도 지원하나요?

아니요, 순수 JavaScript만 처리합니다. TypeScript의 타입 표기는 유효한 JavaScript가 아니므로 여기서는 구문 오류가 됩니다. 먼저 TypeScript를 JavaScript로 컴파일하세요.

관련 도구