코드 압축기 (HTML/CSS/JS) | 웹 성능 최적화 Minifier

코드 압축 결과를 확인하는 방법

배포 전에 JavaScript와 CSS의 불필요한 공백·주석을 줄이고, 원본과 결과의 UTF-8 바이트 크기를 비교하는 도구입니다. HTML은 화면의 띄어쓰기와 내장 스크립트를 보존하기 위해 일반 주석만 정리합니다. 한 파일씩 처리하며, 파일 묶기나 이미지 최적화는 하지 않습니다.

코드 종류를 선택하고 원본을 붙여 넣으세요. 동작이 궁금하면 ‘예제 불러오기’를 사용할 수 있습니다.
‘코드 압축하기’를 누르고 결과와 바이트 차이를 확인하세요. 오류가 나오면 원본의 문법 또는 라이브러리 연결을 확인하세요.
결과를 복사해 별도 파일로 저장한 뒤 실제 페이지에서 기능과 화면을 확인하세요. 원본 파일은 보관하세요.

JavaScript: 문자열은 보존하고 표현은 짧게

입력

// 표시할 이름
const name = "Sejin";
console.log("Hello, " + name);

출력 예시

const name="Sejin";console.log("Hello, Sejin");

Terser가 문법을 해석해 압축하고 지역 변수명을 줄일 수 있습니다. 출력의 표현은 입력 구조에 따라 달라집니다. 이는 암호화가 아니며, 브라우저에 전달하는 코드에 비밀 키를 숨기는 수단이 될 수 없습니다. TypeScript 타입이나 JSX는 먼저 해당 프로젝트의 빌드 도구로 JavaScript로 변환하세요.

CSS: 색상 단축과 공백 정리

입력

/* 버튼 색상 */
.button {
  color: #ff0000;
  padding: 0px 10px;
}

출력 예시

.button{color:red;padding:0 10px}

CSSO로 CSS 문법을 해석하며 규칙 재배치·병합은 끕니다. 문자열, URL, calc()의 의미 있는 공백을 단순 정규식으로 삭제하지 않습니다. Sass·Less 같은 전처리기 문법은 일반 CSS로 먼저 컴파일하세요. 브라우저별 화면과 사용하는 CSS 기능은 배포 전에 확인하세요.

HTML: 표시되는 공백은 유지

입력: <!-- 설명 --><span>Hello</span> <span>world</span>
출력: <span>Hello</span> <span>world</span>

두 span 사이의 공백을 없애면 ‘Helloworld’로 붙어 보일 수 있습니다. 이 도구는 태그·속성·본문의 공백을 유지하고 일반 HTML 주석만 제거합니다. script, style, pre, textarea 내부와 조건부 주석은 보존합니다. 프레임워크가 주석을 DOM 표시자로 쓰는 렌더링 결과에는 사용하지 말고, 해당 프레임워크의 빌드 기능을 사용하세요.

파일 입출력과 ES 모듈 설정

로컬의 JS·MJS·CJS·CSS·HTML 파일을 직접 열 수 있습니다. 1 MiB 이하의 UTF-8 텍스트를 처리하며, 파일 이름에 따라 코드 종류를 선택합니다. TXT는 현재 종류를 유지합니다. 결과는 원본이름.min.js처럼 저장되므로 원본과 분리해 비교할 수 있습니다.

import나 export를 사용하는 ES 모듈은 ‘JavaScript ES 모듈로 처리’를 켜세요. 모듈에서는 최상위 이름이 모듈 범위에 있다고 가정하므로 일반 스크립트의 전역 변수를 다른 파일에서 참조한다면 켜지 않는 것이 좋습니다. MJS 파일은 이 설정을 자동으로 켭니다. 이 도구는 가져온 모듈을 번들로 묶거나 의존 파일까지 처리하지 않습니다.

원본이나 종류·모듈 옵션을 수정하면 이전 결과가 지워집니다. 파일을 읽는 동안 실패해도 기존 입력은 유지합니다. 주석만 있던 파일은 결과가 비어 있을 수 있으며, 이를 오류와 구분해 안내합니다.

결과가 예상과 다를 때

줄어들지 않는 코드: 이미 압축되어 있거나 라이선스 주석을 유지해야 하는 파일은 변화가 작을 수 있습니다. 크기가 커지면 증가량을 표시합니다.
0바이트 결과: 주석만 있는 입력은 빈 결과가 정상일 수 있습니다.
절감률과 실제 속도: 표시는 UTF-8 원본 크기 비교입니다. 서버의 gzip/Brotli 전송 압축, 캐시, 실행 시간과는 별개이므로 페이지가 같은 비율로 빨라진다는 뜻은 아닙니다.
압축 중 오류: 구문 오류 위치를 확인하세요. 네트워크 차단으로 엔진을 불러오지 못했을 때는 원본을 잘못 변환하는 대체 처리를 하지 않습니다.
복사가 안 될 때: 브라우저의 클립보드 권한을 확인하거나 결과 영역을 선택해 직접 복사하세요.

이 도구는 작은 조각을 위한 도구로 한 번에 최대 1 MiB를 받습니다. 전체 프로젝트는 소스맵과 테스트가 함께 실행되는 프로젝트 빌드 과정에서 압축하는 편이 적합합니다. Terser 문서 · CSSO 문서

⚡ 코드 압축기 (HTML / CSS / JS)