JS/CSS 압축

핵심 개념

JS/CSS 압축은 배포 직전 용량을 조금 줄이려고 주석과 공백을 걷어 내는 가벼운 축소기입니다. 자바스크립트 모드에서는 블록 주석과 줄 주석을 지우고 중괄호·연산자 주변 공백을 붙이며, 스타일시트 모드에서는 블록 주석을 지운 뒤 선택자와 중괄호 사이 공백을 붙입니다. 이름 난독화, 트리셰이킹, 스코프 분석은 하지 않으므로 번들러나 Terser를 대체하지 않습니다. 작은 스니펫의 바이트를 눈으로 가늠할 때 JS/CSS 압축이 적합합니다.

원본과 압축 후 숫자는 입력·출력 문자열 길이입니다. 정규식 리터럴 안의 슬래시나 문자열 속 주석 비슷 패턴은 오인될 수 있어, 복잡한 소스는 빌드 파이프라인에서 압축하는 편이 안전합니다. JS/CSS 압축은 파일을 올리지 않고 브라우저에서만 치환합니다. 프로덕션 번들 품질을 보장하는 도구가 아니라, 주석 많은 초안을 짧게 만들어 비교해 보는 보조 유틸리티입니다. 압축 결과가 깨져 보이면 모드가 맞는지 확인하고, 배포용 최종본은 기존 번들 설정을 그대로 두는 편이 안전합니다. 짧은 함수나 한 블록 규칙의 용량 차이를 눈으로 가늠한 뒤 복사하면 됩니다.

예시

JavaScript 모드에서 function hello() { /* 인사 */ console.log(“hi”); } 를 넣고 압축하면 주석과 여백이 사라지고 한 줄에 가깝게 붙습니다. 원본·압축 후 글자 수가 통계에 갱신됩니다.