liminfo

JS Minifier

JavaScript 코드 압축/난독화 도구

373 bytes

JS Minifier 소개

JavaScript Minifier는 브라우저에서 직접 동작하는 무료 JS 압축 도구입니다. 한 줄 주석(//)과 블록 주석(/* */)을 제거하고, 각 줄의 앞뒤 공백을 삭제하며, 빈 줄을 없애고, 연산자 및 구두점 주변의 불필요한 공백을 축약한 뒤, 모든 줄을 하나의 단일 행으로 합칩니다. 결과물은 원본과 기능적으로 동일하지만 파일 크기가 크게 줄어든 최소화된 스크립트입니다.

이 도구는 프론트엔드 개발자, 웹 성능 엔지니어, 학생들이 프로덕션 빌드용 JS 파일 크기를 줄이거나, 압축 과정을 직접 이해하거나, 압축된 코드가 올바르게 동작하는지 확인할 때 사용합니다. 모든 처리가 브라우저 내 JavaScript 문자열 연산으로만 이루어지므로 코드가 서버에 전송되지 않아 완전히 안전합니다.

압축 실행 후 원본 바이트 수, 압축된 바이트 수, 절약된 비율을 한눈에 보여주는 패널이 표시됩니다. 이를 통해 긴 변수명, 주석 양, 코드 스타일이 파일 크기에 미치는 영향을 직접 비교하고 최적화 방향을 쉽게 파악할 수 있습니다.

주요 기능

  • 한 줄 주석(//)과 블록 주석(/* */)을 한 번에 제거
  • 각 줄의 앞뒤 공백 및 들여쓰기 제거
  • 연산자, 중괄호, 세미콜론, 쉼표 주변 불필요한 공백 축약
  • 모든 줄을 하나의 단일 행으로 합쳐 최소 출력 생성
  • 원본 바이트 수와 압축 바이트 수, 절약 비율 실시간 표시
  • 압축된 코드를 클립보드에 원클릭 복사
  • 100% 클라이언트 사이드 처리 — 소스 코드가 브라우저 밖으로 나가지 않음
  • 다크 모드 및 반응형 레이아웃으로 모든 환경에서 편안하게 사용

자주 묻는 질문

JavaScript 압축(minification)이란 정확히 무엇인가요?

압축은 사람이 코드를 읽을 때만 필요한 요소, 즉 주석과 공백, 빈 줄을 제거하는 작업입니다. JavaScript 엔진이 실행에 필요한 모든 토큰은 그대로 유지되므로 동작은 완전히 동일합니다. 파일이 작아지면 네트워크 전송 시간이 줄고 페이지 로드 속도가 빨라집니다.

얼마나 크기가 줄어드나요?

주석이 있는 일반적인 JavaScript 코드는 보통 30~60% 줄어듭니다. 주석이 많은 튜토리얼 코드는 70% 이상 절약되는 경우도 있습니다. 도구가 매 실행 후 정확한 비율을 보여주므로 다양한 입력으로 비교해볼 수 있습니다.

변수 이름을 짧게 바꾸는 기능(mangling)도 지원하나요?

아니요. 이 도구는 공백과 주석 제거만 수행하며 변수 이름 변경, 식별자 단축, 데드 코드 제거는 하지 않습니다. 프로덕션용 완전한 난독화가 필요하다면 빌드 파이프라인에 Terser나 UglifyJS를 통합하는 것이 적합합니다.

프로덕션 코드에 바로 사용해도 되나요?

이 도구는 빠른 확인과 학습용으로 설계되었습니다. 프로덕션 배포에는 Terser 같은 검증된 도구를 빌드 파이프라인에 통합하는 것을 권장합니다. 다만 이 도구의 출력은 주석과 공백만 제거한 유효한 JavaScript이므로 동작에는 문제가 없습니다.

TypeScript나 JSX도 압축할 수 있나요?

이 도구는 텍스트 수준에서 처리하므로 TypeScript 문법과 JSX가 오류를 일으키지는 않지만, 타입 어노테이션과 JSX 태그는 출력에 그대로 남습니다. 올바른 TS/JSX 압축을 위해서는 먼저 tsc 또는 Babel로 트랜스파일해야 합니다.

정규식 리터럴이 압축 후 깨지는 경우가 있나요?

나눗셈 연산자 뒤의 정규식 리터럴은 단순 텍스트 기반 압축기에서 모호하게 처리될 수 있습니다. 문제가 생기면 리터럴 대신 new RegExp() 생성자를 사용하거나, 압축된 결과를 배포 전 브라우저 콘솔에서 테스트하세요.

소스 코드가 서버로 전송되나요?

아니요. 모든 처리가 브라우저 내 JavaScript 문자열 메서드로만 실행됩니다. 코드는 어디에도 업로드되거나 저장되지 않습니다.

여러 파일을 한 번에 압축할 수 있나요?

현재 도구는 한 번에 하나의 텍스트 입력을 처리합니다. 여러 파일을 배치로 압축하려면 입력창에 스크립트를 이어 붙여넣거나, 프로젝트에서 Webpack, Rollup, esbuild 같은 빌드 도구를 사용하세요.