CSS 미니파이어

미니파이어가 하는 일

변환(동작 절대 변경 없음):

• 주석 제거(/*! 라이선스 블록 포함, 전부).
• 불필요한 공백 제거(셀렉터, 선언, 중괄호 사이).
• 닫는 중괄호 앞의 마지막 세미콜론 제거.
• 여러 줄 규칙을 한 줄로 압축.

이것이 전부라서 출력은 원본과 완전히 동일하게 동작합니다. 모든 셀렉터, 속성, 값이 쓴 그대로 유지됩니다.

일반적인 절약량

미니피케이션 위에 서버의 gzip 압축이 또 60~80%를 절약합니다(CSS가 매우 중복적이라 그렇습니다). 두 가지는 누적되니 항상 함께 적용하세요.

미니파이어가 하지 않는 일

• 사용하지 않는 CSS 제거. 그것은 트리 쉐이킹 / PurgeCSS 영역으로, HTML이나 컴포넌트 분석이 필요합니다.
• hex 색상 단축, 0 단위 접기, 선언 병합. 그런 공격적 변환은 cssnano, esbuild, Lightning CSS의 일이며 이 도구는 하지 않습니다.
• 중복 셀렉터를 하나로 병합. 소스 순서가 캐스케이드에 영향을 줘 위험합니다. 일부 미니파이어는 시도하지만 대부분 건너뜁니다.
• 클래스 이름 변경. 그것은 CSS-in-JS나 CSS Modules의 영역입니다.
• 크리티컬 CSS 인라인. 별도의 빌드 시 단계입니다.

라이선스 주석 보존

많은 미니파이어는 /*!로 시작하는 주석을 보존합니다. 라이선스 헤더에 사용됩니다:

/*! Bootstrap v5.3 · MIT License · https://github.com/twbs/bootstrap */

이 도구는 모든 주석을 제거합니다. CSS에 라이선스 헤더가 있다면 압축 후 다시 넣거나, cssnano나 esbuild처럼 라이선스 보존 옵션이 있는 빌드 도구를 쓰세요.

소스 맵

프로덕션 디버깅을 위해 빌드 도구는 압축 출력과 함께 소스 맵을 생성합니다:

styles.min.css
styles.min.css.map

DevTools는 맵을 읽어 요소 검사 시 원본의 정돈된 줄 번호를 보여줄 수 있습니다. 이 도구는 소스 맵을 생성하지 않습니다.

빌드 파이프라인의 CSS 미니피케이션

• Vite, Webpack, Parcel: 프로덕션 빌드에서 자동으로 처리합니다.
• PostCSS + cssnano: 표준 독립 미니파이어.
• esbuild: CSS 미니피케이션도 포함합니다.
• cssnano 프리셋: 안전한 변환은 default, 공격적(약간의 트레이드오프)은 advanced.

이 도구는 일회성 압축, 빠른 수정, 미니파이어가 실제로 무엇을 하는지 배우는 용도입니다. 프로덕션 워크플로에서는 빌드 도구를 써서 소스는 읽기 쉽게 두고 출력만 압축하세요.

미니피케이션이 CSS를 깨뜨릴 수 있는 경우

드물지만 가능합니다:

• 공백이 의미를 가지는 셀렉터: .foo .bar vs. .foo.bar, 공백이 중요합니다.
• 공백이 들어간 커스텀 속성 값: --shadow: 0 2px 4px rgba(0,0,0,0.1), rgba() 내 콤마는 제거되어선 안 됩니다.
• 닫히지 않은 블록 주석: /* missing close는 이후 모든 것을 먹어버립니다. 미니파이어는 잘못된 입력에 잘못 동작할 수 있습니다.

해법: 출시 전 압축 결과를 항상 lint/test 패스로 통과시키세요.