[최적화] PurgeCSS : 쉽고 빠르게 unused css 제거하기

hsecode·2023년 6월 27일

최적화

목록 보기

7/7

🗡 PurgeCSS ?

PurgeCSS는 HTML이나 JS 등의 파일에 들어있는 키워드들을 뽑아내 CSS 파일과 비교한다. 이때 HTML/JS 파일에서 사용되지 않은 선택자와 키워드를 제거해 CSS 파일을 최적화해주는 라이브러리다.

<!-- HTML -->
<div class="section">
    <h1 class="section__heading">Title...</h1>
    <ul class="section__list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</div>

/* CSS */
.intro {padding:20px;color: blue;}
.section {padding: 20px;border: 1px solid blue;}
.section__heading {font-size: 20px;font-weight: bold;}
.section__list {background: #ddd;}
.section__list > li {color: yellowgreen;}
.warn {font-size: 12px;color: red;}

👇👇👇 after PurgeCSS 👇👇👇

/* CSS */
.section {padding: 20px;border: 1px solid blue;}
.section__heading {font-size: 20px;font-weight: bold;}
.section__list {background: #ddd;}
.section__list > li {color: yellowgreen;}

Bootstrap,Bulma 등과 같은 CSS 프레임워크와 함께 사용되고,
Webpack, gulp, grunt 같은 플러그인과 함께 쓰일 수 있다. 참고

유지보수를 오랜기간 진행하다보면 사용하지 않는 스타일까지 끌어안고 가기 마련. 그렇게 쌓인 오래된 미사용 CSS를 정리하기 위해 PurgeCSS를 불러와봤다.
여러가지 방법이 있지만 간단하게 CLI와 Gulp를 활용하는 방법을 기록한다.

💡Unused CSS를 제거해야하는 이유

CSS는 렌더차단 리소스다. 브라우저가 화면을 그리는 데에 더 많은 시간을 소모하게 한다. CSS의 용량이 커질수록 화면 그려지는 속도는 저하되고, 사용자경험 또한 안좋아지며, 자연스럽게 성능이 떨어지면서 검색엔진최적화에도 영향을 준다.
Unused css는 크롬 Lighthouse/Coverage에서 확인 가능하다.

🗡 PurgeCSS 사용법

📟 CLI

설치

package.json에 purgecss가 설치된 것을 확인할 수 있다.

npm i -g purgecss

실행

아래 순서로 명령어를 입력하면 output 경로에 css 파일이 생성된다.
purgecss --css [CSS파일 경로] --content [HTML파일 경로] --output [결과물저장 경로]

npx purgecss --css project/test.css --content project/index.html --output project/dist

참고: PurgeCSS_CLI

🥤 Gulp

설치

package.json에 gulp-purgecss가 설치된 것을 확인할 수 있다.

npm i -D gulp-purgecss
npm install --save-dev gulp-purgecss

gulpfile.js에 하단 코드 추가

const gulp = require('gulp');
const purgecss = require('gulp-purgecss');

gulp.task('purgecss', () => {
    return gulp.src('project/css/*.css') //css 파일 경로
        .pipe(purgecss({
            content: ['project/html/**/*.html'] //html 파일 경로
        }))
        .pipe(gulp.dest('project/dist')) //output 저장 경로
})