JS 압축기

JS 압축기는 JavaScript에서 불필요한 문자를 제거하고 압축 전후의 문자 수를 보여 주는 무료 도구입니다.

JavaScript 압축은 어떤 문제를 해결하나요?

JavaScript를 압축하면 브라우저가 다운로드해야 하는 소스 코드의 양을 줄일 수 있습니다. JavaScript 문법에 필요하지 않은 들여쓰기, 줄바꿈, 공백 같은 서식을 주로 제거합니다.

스크립트가 작아지면 전송량과 구문 분석 작업을 줄일 수 있으며, 특히 대용량 번들을 여러 개 제공하는 사이트에서 효과가 큽니다. Brotli나 gzip 같은 HTTP 압축도 여전히 중요합니다. 코드 압축과 전송 압축은 서로 다른 부분을 처리하기 때문입니다. 코드 압축은 소스 문자를 제거하고, 전송 압축은 반복되는 데이터를 더 작은 형태로 인코딩합니다.

이 작업은 일반적으로 배포 전 빌드 과정에서 수행합니다. 압축되지 않은 서드 파티 스크립트를 확인하거나 번들 크기를 비교할 때, 또는 빌드 파이프라인이 없는 사이트에 사용할 독립 실행형 파일을 준비할 때도 유용합니다.

압축에 성공했다고 해서 JavaScript가 올바르게 작동한다는 뜻은 아닙니다. 잘못된 API 호출이나 접근할 수 없는 변수, 런타임에만 실패하는 코드가 있어도 스크립트 자체는 정상적으로 압축될 수 있습니다.

JS 압축기는 어떻게 사용하나요?

JavaScript를 JS 필드에 붙여넣고 도구를 실행한 다음, 압축된 JS에 반환된 값을 복사하세요. 원본 소스 파일은 버전 관리 시스템에 보관하고, 읽기 쉬운 원본을 대체하지 말고 압축된 사본을 배포하세요.

1. 먼저 원본 소스 코드에 구문 검사, 린터, 자동화 테스트를 실행하세요.
2. 해당 파일에 포함되는 모듈 import나 래퍼 함수까지 모두 포함해 전체 스크립트를 JS에 붙여넣으세요.
3. JS 문자 수와 압축된 JS 문자 수를 확인해 문자 수가 얼마나 달라졌는지 살펴보세요.
4. 압축된 JavaScript가 운영 파일과 동일한 브라우저 및 배포 환경에서 올바르게 실행되는지 테스트하세요.
5. 압축본과 읽기 쉬운 버전을 함께 저장한다면 app.min.js처럼 알아보기 쉬운 파일명을 사용하세요.

처리는 서버에서 이루어집니다. 입력한 내용은 HTTPS를 통해 서버로 전송되며 저장되지 않습니다. 다만 처리하려면 서버가 JavaScript를 수신해야 하므로, 조직에서 외부 서비스 전송을 금지한 소스는 제출하지 마세요.

압축 결과에는 무엇이 포함되나요?

결과에는 압축된 JavaScript와 두 가지 문자 수가 표시됩니다. JS 문자 수는 입력 길이이며, 압축된 JS 문자 수는 반환된 압축된 JS의 길이입니다.

문자 수는 단순히 바이트 수를 계산하는 대신 멀티바이트 문자열의 길이를 측정하는 PHP의 mb_strlen 함수로 구합니다. 따라서 문자 수는 최종 네트워크 전송 크기와 같지 않습니다. UTF-8 문자는 하나가 2바이트 이상을 차지할 수 있으며, gzip이나 Brotli를 적용하면 전송 파일을 더 줄일 수 있습니다.

이 도구는 별도의 유효성 검사나 진단 필드를 반환하지 않습니다. 누락된 괄호, 잘못된 정규 표현식, 지원되지 않는 언어 기능을 모두 찾아낼 것으로 기대하지 마세요. 특히 따옴표가 없는 속성명이나 후행 쉼표 같은 JSON 관련 오류는 JavaScript를 검사하는 확실한 기준이 아닙니다. JavaScript 객체 리터럴 문법과 JSON 문법이 서로 다르기 때문입니다. JSON 데이터에는 JSON 유효성 검사기 및 포매터를 사용하세요.

간단한 예시와 까다로운 입력

간단히 공백만 정리하면 다음과 같이 바뀝니다.

입력

function add(a, b) { return a + b; }

압축 결과

function add(a,b){return a+b;}

객체의 속성값을 변경하지 않고 주변 서식도 제거할 수 있습니다.

입력

const settings = { theme: "dark", retries: 2 };

압축 결과

const settings={theme:"dark",retries:2};

정확한 출력 형식은 압축기마다 다를 수 있으며, 선택적으로 사용할 수 있는 세미콜론 주변에서 특히 차이가 납니다. 모든 공백이나 줄바꿈을 삭제하는 방식으로는 JavaScript를 안전하게 압축할 수 없습니다. 안전한 압축을 위해서는 어휘 및 구문 맥락을 고려해 단순한 서식과 프로그램 동작에 영향을 주는 문자를 구분해야 합니다.

• 문자열 안의 공백은 데이터입니다. "Newcastle upon Tyne"의 공백은 그대로 유지해야 합니다.
• 문장 부호는 문법 요소일 수 있습니다. a + +b에서 공백을 제거하면 다른 토큰 배열이 만들어질 수 있습니다.
• 줄바꿈은 return, break, continue 뒤에 오는 코드를 비롯해 자동 세미콜론 삽입에 영향을 줄 때가 있습니다. throw 바로 뒤에는 표현식이 같은 줄에서 시작해야 하므로 줄바꿈을 넣을 수 없습니다.
• 악센트 문자와 비라틴 문자는 문자열에 포함될 수 있으며, JavaScript 식별자 규칙이 허용하는 경우 식별자에도 사용할 수 있습니다. 이런 문자의 바이트 크기는 문자 수와 다를 수 있습니다.
• 숫자는 문자 수를 지정하는 명령이 아니라 소스 토큰입니다. 압축기가 더 짧고 동일한 표기법을 선택하더라도 숫자의 의미는 유지해야 합니다.

JavaScript를 압축해도 별다른 이점이 없는 경우는 언제인가요?

이미 압축된 파일은 다시 압축할 필요가 거의 없습니다. 두 번째 압축으로 줄어드는 크기가 미미하거나 전혀 없을 수 있고, 빌드 결과를 추적하기 어려워지며 기존 소스 맵에 문제가 생길 가능성도 있습니다.

기계만 읽을 JavaScript를 보기 좋게 정리한 뒤 다시 압축할 이유도 거의 없습니다. 유지보수용으로 사람이 읽을 수 있는 소스를 보관하고, 그 소스에서 배포용 산출물을 생성하세요. 기존 애플리케이션에는 일반적으로 esbuild, Rollup, webpack 같은 빌드 도구가 더 적합합니다. 모듈 번들링과 소스 맵 생성을 자동화할 수 있기 때문입니다. 압축 기능은 기본으로 포함되어 있거나 설정 또는 플러그인을 통해 추가할 수 있으며, Terser는 압축 전용 도구입니다.

코드 압축을 난독화나 접근 제어 수단으로 여기지 마세요. 함수명과 변수명이 그대로 보일 수 있고, 문자열 리터럴도 읽을 수 있으며, 브라우저 개발자 도구로 압축된 코드를 다시 보기 좋게 정리할 수도 있습니다. 비밀 정보, 개인 키, 높은 권한을 가진 인증 정보는 클라이언트 측 JavaScript에 절대 포함하면 안 됩니다.

페이지의 모든 정적 자산을 준비하고 있다면 CSS 압축기와 HTML 미니파이어를 사용해 각 형식에 맞는 작업을 수행할 수 있습니다. 형식마다 파싱 방식과 공백 처리 규칙이 다르므로 각각 해당 도구를 사용하세요.

자주 묻는 질문

소스 맵도 생성되나요?

아니요. 소스 맵 필드는 반환되지 않습니다. 운영 환경의 스택 트레이스를 원본 파일에 매핑해야 한다면 동일한 빌드 과정에서 압축 스크립트와 이에 대응하는 .map 파일을 함께 생성하세요. 다른 빌드에서 만든 소스 맵을 배포하면 잘못된 줄과 열 위치가 표시될 수 있습니다.

압축하면 다른 사람이 내 JavaScript를 복사하지 못하나요?

아니요. 브라우저는 실행 가능한 클라이언트 측 코드를 받아야 하므로 방문자는 이를 다운로드해 살펴볼 수 있습니다. 압축하면 소스를 읽기 어려워지지만 기밀성을 보장하거나 라이선스를 강제할 수 없으며, 포함된 비밀 정보를 실질적으로 보호하지도 못합니다.

API 키가 들어 있는 코드를 붙여넣어도 되나요?

비밀 API 키, 토큰 또는 비공개 인증 정보는 붙여넣지 마세요. 입력 내용은 HTTPS로 전송되고 저장되지 않지만 서버에서 처리됩니다. 모든 방문자에게 의도적으로 배포하는 공개 브라우저 키라도 관련 서비스에서 지원한다면 도메인, 출처, 할당량 또는 권한 제한을 설정해야 합니다.

문자 수가 줄면 페이지 로딩 속도가 항상 빨라지나요?

아니요. 효과는 원본 파일 크기, 캐싱, 연결 상태, 서버 압축, 브라우저가 구문 분석하고 실행해야 하는 JavaScript의 양에 따라 달라집니다. 전체 문자 수뿐 아니라 압축된 전송 크기와 런타임 동작도 확인하세요.

압축한 뒤에도 .js 확장자를 유지해야 하나요?

네. 압축된 JavaScript도 일반적으로 .js 확장자를 유지하며, 두 버전이 모두 있을 때는 관례적으로 압축본에 .min.js를 사용합니다. 배포하기 전에 서버가 적절한 JavaScript 콘텐츠 유형을 전송하는지, HTML이나 모듈 import가 원하는 파일을 가리키는지 확인하세요.