CSS 코드 압축

용량이 실제로 줄어드는 곳

절약되는 용량의 대부분은 공백과 주석이고, 직접 작성한 스타일시트에서는 그 양이 상당합니다. 들여쓰기, 규칙 사이의 빈 줄, 큰 파일을 찾아보기 쉽게 해 주는 섹션 제목은 배포되는 순간 모두 순수한 군더더기입니다. 그 외에는 의미가 바뀔 수 없는 방식으로 값을 줄입니다. #ffffff로 쓴 색상은 #fff가 되고, 0에는 단위가 필요 없으니 0px는 0이 되며, 0.5em의 앞자리 0은 빠지고, margin: 10px 10px 10px 10px는 margin: 10px로 줄어듭니다.

위험한 작업은 일부러 하지 않습니다. 선언이 같은 규칙을 합치거나 순서를 바꾸면 캐스케이드가 달라집니다. 캐스케이드는 우선순위가 같은 두 규칙을 나중에 온 쪽으로 결정하는 CSS의 핵심입니다. 공격적으로 순서를 바꾸는 압축기는 파일은 작게 만들지만, 큰 스타일시트에서는 미묘하게 다른 페이지를 만들어 냅니다. 중복 선언도 의도적인 경우가 많습니다. 두 번째 선언을 무시하는 오래된 브라우저를 위한 대비책으로 남겨 둔 것입니다.

중첩 규칙과 최신 미디어 범위 문법은 압축하지 않고 거부합니다. 대부분의 도구와 정반대로 동작하는 부분이라 이유를 밝혀 둘 필요가 있습니다. 이 도구의 바탕이 된 파서는 두 기능보다 먼저 만들어졌고, 이해하지 못하는 것을 만나면 오류를 내지 않고 소리 없이 지워 버립니다. 그래서 중첩 블록이 결과에서 그냥 사라지고, 페이지는 아무 경고도 없이 스타일을 잃습니다. 파일을 거부하는 것이 정직한 답입니다. 스타일시트에 네이티브 중첩이나 @media (400px <= width <= 700px)가 쓰였다면 아래 도구 중 하나를 사용하세요.

마크업과 마찬가지로 결과는 압축 후를 기준으로 판단하세요. 스타일시트는 gzip이나 brotli로 압축되어 전송되고, 이 알고리즘은 이미 반복되는 공백을 매우 잘 처리합니다. 그래서 최소화로 30% 줄어든 파일도 실제 전송량은 5%만 줄어들 수 있습니다. 절약은 실제로 있지만, 표시된 숫자보다는 작습니다.

다른 작업이 필요할 때

최신 스타일시트에는 Lightning CSS가 맞는 도구입니다. 중첩, 미디어 범위, 색상 함수 등 최근 몇 년 사이 추가된 모든 기능을 이해하고, 어떤 오래된 도구보다 더 강하게 압축하며, 새 문법을 오래된 브라우저용으로 변환까지 해 줍니다. esbuild --minify style.css도 거의 같은 수준이며 매우 빠릅니다. 둘 다 브라우저 탭이 아니라 빌드 단계에서 쓰는 도구입니다.

훨씬 큰 효과는 대개 쓰지 않는 규칙을 제거하는 것에서 나옵니다. 유틸리티 프레임워크나 컴포넌트 라이브러리로 만든 사이트는 파일 대부분이 페이지의 어떤 요소와도 일치하지 않는 스타일시트를 배포하는 경우가 흔합니다. PurgeCSS나 프레임워크 자체 빌드를 쓰면 이를 몇 분의 일로 줄일 수 있습니다. 쓰지 않는 CSS를 최소화하면 쓰지 않는 CSS가 작아질 뿐이고, 지우는 것이 진짜 해결책입니다.