CSS 적용 범위 및 사용하지 않는 스타일

대규모 CSS 파일에는 현재 페이지에 없는 구성 요소의 스타일이 포함된 경우가 많습니다. 사용되지 않는 바이트는 하나하나 구문 분석 시간, CSSOM 구성 시간, 전송 크기를 늘립니다. 일반적인 프로덕션 앱에서는 어느 페이지에서든 CSS의 90% 이상이 사용되지 않을 수 있습니다.

DevTools → 적용 범위 패널을 여십시오(Cmd+Shift+P → 적용 범위). 기록을 시작하고 페이지와 상호 작용한 다음 중지하십시오. 패널에는 각 CSS 파일의 사용 비율이 표시되고 사용되지 않는 규칙이 빨간색으로 강조됩니다. 분석을 위해 적용 범위 데이터를 JSON으로 내보내십시오.

PurgeCSS는 HTML, JS, 템플릿 파일에서 클래스 이름을 검색하고 사용되지 않는 CSS 규칙을 제거합니다. 클래스 이름을 참조할 수 있는 모든 파일과 일치하도록 콘텐츠 전역 패턴을 구성하십시오. 동적으로 사용되는 클래스(JS가 추가하는 클래스)는 실수로 제거되지 않도록 허용 목록에 추가하십시오.

Tailwind의 JIT 컴파일러는 템플릿에서 실제로 사용되는 유틸리티 클래스만 생성합니다. 사용되지 않는 유틸리티는 애초에 생성되지 않으므로 결과 CSS는 매우 작으며, 전체 애플리케이션에서도 5~15KB인 경우가 많습니다. 이것이 이상적인 제거 결과입니다.

webpack 또는 Vite 구성에 콘텐츠 전역 패턴으로 모든 템플릿 파일을 포함하는 PurgeCSS를 추가하십시오. 허용 목록 옵션은 문자열, 정규 표현식, 그리고 Headless UI 같은 라이브러리의 복잡한 동적 클래스 패턴을 위한 심층 허용 목록을 받습니다.

CSS Modules는 파일마다 고유한 클래스 이름을 생성하고 번들러 구성에 따라 사용되지 않는 모듈을 트리 셰이킹합니다. 가져온 CSS 모듈만 번들에 포함되므로, 구성 요소와 스타일을 함께 배치하는 방식으로 전역에서 사용되지 않는 스타일을 자연스럽게 제거할 수 있습니다.

Next.js 같은 프레임워크에서는 경로별로 CSS를 코드 분할하거나 CSS Modules와 함께 동적 가져오기를 사용하십시오. 각 페이지가 자체 스타일만 불러오므로 애플리케이션 전체가 아닌 페이지별로 적용 범위를 분석하는 것이 의미 있어집니다.

Lighthouse의 "사용되지 않는 CSS 줄이기" 감사는 사용되지 않는 규칙을 제거하여 절약할 수 있는 바이트를 추정합니다. 사용되지 않는 비율이 높은 특정 스타일시트 리소스를 식별합니다. 어떤 파일부터 감사할지 우선순위를 정하는 지침으로 사용하십시오.

적용 범위 분석은 기록 중에 표시된 상태만 포착합니다. 스타일이 잘못 제거되지 않도록 마우스를 올린 상태, 모달이 열린 상태, 오류 상태, 인증된 상태를 적용 범위 기록 중에 수동으로 실행해야 합니다.

기능이 제거되면서 단일 전역 스타일시트에는 사용되지 않는 CSS가 시간이 지날수록 쌓입니다. 구성 요소별 CSS(CSS Modules, Styled Components, Tailwind 유틸리티)는 스타일이 구성 요소와 함께 있으므로 정리하기 쉽고, 함께 제거할 수 있습니다.

대규모 레거시 CSS 파일의 경우 먼저 UnCSS 또는 PurgeCSS를 보고서 전용 모드로 사용하십시오. 사용 빈도에 따라 규칙을 정렬하십시오. 명백하게 사용되지 않는 외부 업체 플러그인 스타일은 추출하여 삭제하십시오. 예외적인 상태에 필요한 스타일을 실수로 제거하지 않도록 점진적으로 작업하십시오.

Chrome DevTools 적용 범위 패널은 무엇을 측정합니까?

DevTools 적용 범위와 Lighthouse를 사용한 CSS 적용 범위 분석으로 사용되지 않는 규칙을 식별할 수 있습니다. PurgeCSS와 Tailwind JIT는 사용하지 않는 코드 제거를 자동화합니다. CSS Modules와 경로별 분할은 사용되지 않는 스타일이 쌓이는 것을 방지합니다. 이 방법들을 함께 사용하면 CSS 전송량과 구문 분석 시간을 최소화할 수 있습니다.