웹 개발
JS Minify / Beautify
프로덕션용으로 JavaScript를 압축하거나 압축된 코드를 읽기 쉬운 형식으로 포맷합니다.
미리보기에는 너무 큼
미리보기에는 너무 큼
Minifying JavaScript strips whitespace, comments, and line breaks, and often shortens local variable names — none of that changes how the code runs, but it noticeably shrinks the file for a faster load.
How to use it
- Minify: paste JavaScript code and the tool compresses it while keeping its behavior identical.
- Beautify: paste minified code with no indentation to get a readable version for analysis or debugging.
- Beautifying is especially useful for picking apart a third-party minified script when no source map is available.
Common uses
- Quickly minifying a small script without setting up a full build tool.
- Beautifying minified code from a third-party library to understand what it does.
- Inspecting a suspicious or unclear minified script before trusting it to run.
Things to keep in mind
Minification isn't obfuscation — variables get renamed to shrink size, not to hide logic; serious obfuscation needs dedicated specialized tools.
Minified code in production without a source map is hard to debug — the line numbers in error messages won't match the original file.
자주 묻는 질문
압축기는 내부적으로 어떤 도구를 사용하나요?
현대적인 구문도 이해하는 널리 사용되는 JavaScript 압축기 및 압축 도구인 terser를 사용합니다.
압축된 JavaScript는 왜 디버깅하기 더 어렵나요?
Terser는 변수와 함수 이름을 축약하고 공백과 주석을 제거하며, 이 도구는 소스 맵을 생성하지 않으므로 브라우저 개발자 도구가 압축된 코드를 읽기 쉬운 원본 라인으로 매핑할 수 없습니다.
압축이 제 코드를 망가뜨리나요?
구문적으로 유효한 JavaScript의 경우 압축은 동작을 유지합니다. 구문 오류가 있으면 도구가 줄과 열을 보고하여 압축 전에 수정할 수 있게 합니다 — 모든 작업은 코드를 업로드하지 않고 로컬에서 실행됩니다.
Tree shaking은 압축과 어떻게 다른가요?
Tree shaking은 빌드 중에 모듈 의존성 그래프를 분석하여 어디에서도 사용되지 않는 코드를 번들에서 제거하는 반면, 압축은 이미 존재하는 코드의 텍스트 표현만 줄일 뿐 실제로 실행되는 함수는 전혀 제거하지 않습니다.
추가 테스트 없이 압축된 JavaScript를 프로덕션에서 사용해도 안전한가요?
예, 압축은 순전히 구문적인 변환으로 프로그램의 동작을 완전히 동일하게 유지합니다. 압축 후 동작에 차이가 생긴다면 이는 의도적인 로직 변경이 아니라 압축 도구 자체의 버그를 의미합니다.