PurgeCSS, 불필요한 CSS제거하기

PurgeCSS는 불필요한 CSS를 제거해주는 기능을 합니다. Tailwind가 스폰서로 있으니 믿고 사용해보겠습니다.

Getting Started | PurgeCSS

npm i -g purgecss

packge.json

script 추가

"purge": "purgecss --css ./build/static/css/ --output ./build/static/css/ --content ./build/index.html ./build/static/js/*.js"

스크립트 내용은 각자 개발환경에 맞게 설정해주세요.

• — css: 디렉토리 내의 모든 css 파일을 대상
• — content: PurgeCSS가 분석할 콘텐츠 파일을 지정
• — output: 정리된 css파일을 저장할 디렉토리 지정

이제 불필요한 CSS를 찾아보겠습니다.

크롬 개발자 툴에서 Esc키 입력 후 Coverage 선택

녹화 아이콘을 선택 후 새로고침을 하면 현재 페이지에서 불필요한 CSS을 확인할 수 있습니다.

그래프에서 빨간 영역은 사용하지 않는 CSS 비율입니다. CSS파일의 이름, 총 바이트 수, 미 사용중인 Bytes를 확인 할 수 있습니다.

용량이 젤 큰 파일을 더블클릭 해보면 사용되지 않은 css 속성들을 확인할 수 있습니다.

이제 Purge CSS를 적용 후 변화 값을 보겠습니다.

위에서 Unused Bytes는 1,638,743 byte 아래는 Purege Css를 적용 후 Unused Bytes가 495,077 byte까지 줄어들었습니다. css파일의 용량이 약 35%정도 줄어든 것을 확인할 수 있습니다^^

남아있는 Unused Bytes는 최적화를 통해 더 줄 일 수 있습니다.

CLI는 https://purgecss.com/CLI.html 여기서 확인할 수 있고 NextJS, Vue 등의 가이드도 확인할 수 있습니다.