코드 압축 결과를 확인하는 방법
배포 전에 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 표시자로 쓰는 렌더링 결과에는 사용하지 말고, 해당 프레임워크의 빌드 기능을 사용하세요.
결과가 예상과 다를 때
- 줄어들지 않는 코드: 이미 압축되어 있거나 라이선스 주석을 유지해야 하는 파일은 변화가 작을 수 있습니다. 크기가 커지면 증가량을 표시합니다.
- 0바이트 결과: 주석만 있는 입력은 빈 결과가 정상일 수 있습니다.
- 절감률과 실제 속도: 표시는 UTF-8 원본 크기 비교입니다. 서버의 gzip/Brotli 전송 압축, 캐시, 실행 시간과는 별개이므로 페이지가 같은 비율로 빨라진다는 뜻은 아닙니다.
- 압축 중 오류: 구문 오류 위치를 확인하세요. 네트워크 차단으로 엔진을 불러오지 못했을 때는 원본을 잘못 변환하는 대체 처리를 하지 않습니다.
- 복사가 안 될 때: 브라우저의 클립보드 권한을 확인하거나 결과 영역을 선택해 직접 복사하세요.
이 도구는 작은 조각을 위한 도구로 한 번에 최대 1 MiB를 받습니다. 전체 프로젝트는 소스맵과 테스트가 함께 실행되는 프로젝트 빌드 과정에서 압축하는 편이 적합합니다. Terser 문서 · CSSO 문서