JavaScript 압축기

JavaScript 압축기란?

JavaScript 압축기는 공백, 주석을 제거하고 가능한 경우 변수 이름을 단축하여 JS 코드를 압축합니다. 이를 통해 파일 크기가 줄어들고 웹사이트 로딩 시간이 개선되며, 이는 성능 최적화에 매우 중요합니다.

JavaScript 압축기 사용 방법

1. 입력 영역에 JavaScript 코드를 붙여넣습니다.
2. “압축하기”를 클릭하여 코드를 압축합니다.
3. 프로덕션 배포를 위해 압축된 결과를 복사합니다.

주요 개념

JavaScript 압축은 공백 제거를 넘어섭니다. 로컬 변수 이름 단축(맹글링), 데드 코드 제거, 간단한 함수 인라인화, 상수 표현식 축소가 가능합니다. 난독화와 달리 압축은 코드를 더 작게 만들면서 기능을 보존합니다. Webpack과 Rollup 같은 대부분의 최신 번들러에는 내장 압축 기능이 포함되어 있습니다.

자주 묻는 질문

압축이 JavaScript 코드를 망가뜨릴 수 있나요?

올바르게 작성된 JavaScript는 압축 시 문제가 발생하지 않습니다. 변수 이름이 단축될 수 있으므로 함수 이름 문자열이나 eval()에 의존하는 코드에서 문제가 발생할 수 있습니다.

압축(minification)과 난독화(uglification)의 차이점은 무엇인가요?

본질적으로 같은 과정입니다. “Uglify”는 이 과정의 대명사가 된 인기 있는 압축 도구입니다. 둘 다 공백을 제거하고 선택적으로 변수 이름을 단축합니다.

압축된 코드에 소스 맵을 사용해야 하나요?

네. 소스 맵을 사용하면 브라우저가 압축된 코드를 원본 소스로 매핑할 수 있어 파일 크기를 작게 유지하면서 프로덕션에서의 디버깅이 훨씬 쉬워집니다.