WebTools

Useful Tools & Utilities to make life easier.

JS Minifier

자바스크립트 코드를 압축하여 성능을 개선합니다.

자바스크립트 압축 도구란?

들여쓰기와 줄바꿈으로 정리된 자바스크립트(JS) 코드에서, 실행에 필요 없는 공백과 주석을 없애고 내부 변수의 이름을 짧게 바꿔 파일 크기를 줄이는 도구입니다. 이런 작업을 압축(minify, 미니파이)이라고 부릅니다. 스크립트를 서버에 올리기 전에 한 번 압축해 두면 방문자에게 전송되는 데이터양이 줄어, 특히 모바일에서 스크립트를 더 빨리 내려받게 됩니다.

압축 과정에서는 공백과 줄바꿈, 주석이 사라지고 함수 안에서만 쓰이는 변수의 이름이 a, b처럼 한두 글자로 축약됩니다. 코드의 동작은 그대로 유지되지만 표기는 알아보기 어려울 만큼 촘촘해집니다. 반대로 읽기 좋게 다시 펴야 한다면 자바스크립트 포맷터로 줄바꿈을 복원할 수 있습니다.

사용 방법

  1. 편집기 영역에 압축할 자바스크립트 코드를 붙여넣습니다.
  2. 아래의 압축 버튼을 누르면 같은 편집기 안에서 코드가 압축된 결과로 바뀝니다.
  3. 편집기 오른쪽 위의 복사 버튼으로 결과를 클립보드에 담아 사용합니다.

문법에 오류가 있는 코드는 압축이 되지 않고 오류 안내가 표시됩니다. 이때는 코드의 괄호 짝이나 세미콜론을 점검한 뒤 다시 시도하세요. 또한 결과가 입력했던 편집기에 그대로 덮어써지므로, 주석과 들여쓰기가 담긴 원본은 반드시 따로 보관한 상태에서 사용하세요.

압축 전후 비교 예시

주석과 들여쓰기가 있는 함수를 실제로 압축하면 다음과 같이 바뀝니다.

구분코드글자 수
압축 전 // 두 수를 더한다
function sum(first, second) {
    return first + second;
}
72자
압축 후 function sum(n,u){return n+u} 29자

이 예시에서는 주석과 들여쓰기가 사라지고 매개변수 이름이 짧아지면서 72자가 29자로, 약 60% 줄었습니다. 실제 감소율은 주석과 긴 변수명이 얼마나 많은지에 따라 달라지며, 규모가 큰 스크립트일수록 절감 폭이 커지는 편입니다.

자주 묻는 질문

압축하면 코드 동작이 달라질 수도 있나요?

정상적인 코드라면 동작은 그대로입니다. 압축은 공백과 주석을 없애고 지역 변수의 이름만 바꾸는 작업이라, 실행 결과는 압축 전과 같습니다. 다만 안심을 위해 압축본을 실제 페이지에서 한 번 실행해 보고 확인하는 습관은 도움이 됩니다.

압축한 코드를 다시 원래대로 되돌릴 수 있나요?

완전히는 안 됩니다. 자바스크립트 포맷터로 줄바꿈은 다시 펼 수 있지만, 압축 때 짧게 바뀐 변수명과 삭제된 주석은 원래대로 돌아오지 않습니다. 그래서 압축본은 배포 전용으로 쓰고, 수정은 항상 원본 파일에서 하는 것이 원칙입니다.

붙여넣은 코드가 서버로 전송되나요?

아닙니다. 압축 처리는 접속하신 분의 브라우저 안에서 자바스크립트로 이루어지며, 입력한 코드가 저희 서버로 올라가지 않습니다. 외부에 보내기 민감한 코드도 안심하고 사용하실 수 있습니다.

압축 버튼을 눌렀는데 오류가 뜹니다.

입력한 코드에 문법 오류가 있으면 압축기가 코드를 해석하지 못해 오류 안내가 나타납니다. 대개 괄호나 중괄호의 짝이 맞지 않거나, 문장 끝이 온전하지 않은 경우입니다. 포맷터로 코드를 펴서 구조를 확인한 뒤 오류를 고치고 다시 시도해 보세요.