PurgeCSS 사용법
PurgeCSS 사용법에 대해 정리한 페이지입니다.
Tags
React, CSS, PurgeCSS
Environment
vite v7.2.6
react v19.2.0
개요
PurgeCSS 사용법에 대해 정리한 페이지입니다.
PurgeCSS
PurgeCSS란?
PurgeCSS는 사용되지 않는 CSS를 자동으로 제거해 CSS 파일 크기를 줄여주는 도구입니다. 파일에 들어 있는 모든 키워드를 추출하여 해당 키워드를 이름으로 갖는 CSS 클래스만 보존하고 나머지 매칭되지 않은 클래스는 모두 지우는 방식으로 CSS 파일을 최적화합니다.
PurgeCSS 사용하기
PurgeCSS 사용 전
다음과 같은 CSS 파일이 있을 때, title이란 클래스만 사용된다고 가정합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.title {
color: teal;
font-size: 1.5rem;
}
.title1 {
color: red;
font-size: 0.5rem;
}
.title2 {
color: blue;
font-size: 0.6rem;
}
/* ... */
.title10 {
color: orange;
font-size: 1.4rem;
}
1
2
3
4
5
6
7
8
9
import "./purgePage.css";
export const PurgePage = () => {
return (
<div className="flex flex-col items-center pt-8">
<h1 className="title">PurgeCSS 테스트</h1>
</div>
);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
user@MacBookProui-MacBookPro frontend-study % npm run build
> frontend-study@0.0.0 build
> tsc -b && vite build
vite v7.2.6 building client environment for production...
✓ 68 modules transformed.
dist/index.html 0.46 kB │ gzip: 0.30 kB
dist/assets/pic1-jPs2OPPP.avif 6.21 kB
dist/assets/pic1-B0mQWuTU.webp 29.27 kB
dist/assets/pic4-C4drb1EU.avif 53.79 kB
dist/assets/pic2-CCCrl7Re.avif 55.34 kB
dist/assets/pic2-BqTN6QfY.webp 98.01 kB
dist/assets/pic4-DL3xka5u.webp 99.67 kB
dist/assets/pic1-D5kM-hE3.jpg 181.18 kB
dist/assets/pic3-BUMMFLBw.avif 331.41 kB
dist/assets/pic2-BVOj3egQ.jpg 386.58 kB
dist/assets/pic3-EHTDm3p7.webp 404.90 kB
dist/assets/pic4-TmpfCLWJ.jpg 405.95 kB
dist/assets/pic3-DUjokJMc.jpg 765.56 kB
dist/assets/Pretendard-Regular-BhrLQoBv.woff2 765.89 kB
dist/assets/Pretendard-ExtraLight-CmnYHmfp.woff 1,104.10 kB
dist/assets/Pretendard-Regular-D5CgADJ9.woff 1,115.06 kB
dist/assets/Pretendard-Light-BSr3DBFh.woff 1,117.20 kB
dist/assets/Pretendard-Bold-DD7wHHNl.woff 1,129.62 kB
dist/assets/Pretendard-ExtraBold-DkRXFB8B.woff 1,134.30 kB
dist/assets/Pretendard-Black-CGKHU3YP.woff 1,139.97 kB
dist/assets/Pretendard-Regular-BinLXi77.otf 1,574.35 kB
dist/assets/index-CcWn8h8q.css 0.40 kB │ gzip: 0.16 kB
dist/assets/index-BSr1OHCe.css 0.87 kB │ gzip: 0.28 kB
dist/assets/index-BrrVc9Tq.css 6.28 kB │ gzip: 4.48 kB
dist/assets/index-PL-c7qUO.css 6.76 kB │ gzip: 2.08 kB
dist/assets/index-CxJQ9LpH.js 0.15 kB │ gzip: 0.14 kB
dist/assets/index-CTm5IZBe.js 0.21 kB │ gzip: 0.19 kB
dist/assets/index-DKx2pq94.js 0.35 kB │ gzip: 0.26 kB
dist/assets/index-Dk-pgkl1.js 0.63 kB │ gzip: 0.31 kB
dist/assets/index-OVxSfRB1.js 2.67 kB │ gzip: 0.76 kB
dist/assets/index-Ds3wge1X.js 230.09 kB │ gzip: 73.77 kB
✓ built in 419ms
이 코드를 사용하는 애플리케이션을 Production 모드로 시행했을 때, 크롬 개발자 도구의 범위(Coverage) 패널을 확인해보면 사용하지 않는 CSS 코드 비율이 91.3%임을 확인할 수 있습니다.
Info.
범위(Coverage) 패널은 페이지에서 사용하는 자바스크립트 및 CSS 리소스에서 실제로 실행하는 코드가 얼마나 되는지 알려줍니다.
사용되지 않는 CSS 코드도 함께 빌드됨으로써 파일의 사이즈를 크게 만드는 단점이 있습니다. 따라서 이러한 사용하지 않는 CSS 코드를 제거할 필요할 필요가 있습니다. 사용하지 않는 CSS 코드를 제거하는 방법은 여러가지가 있지만, 이번 글에서는 PurgeCSS를 사용하여 제거하겠습니다.
CLI로 PurgeCSS 사용하기
먼저 다음 명령어를 입력하여 PurgeCSS를 설치합니다.
1
npm install --save-dev purgecss
설치 이후에는 package.json 파일의 scripts 항목에 불필요한 클래스를 제거할 CSS 파일을 지정합니다. 다음과 빌드 결과물이 있을 경우,
--css 옵션에는 빌드된 CSS 파일을, --output 옵션에는 동일한 위치를 지정하여 새로운 파일을 생성하는 대신 기존 CSS 파일을 덮어쓰도록 설정합니다. 또한 --content 옵션에는 키워드를 추출할 파일로, index.html 파일과 자바스크립트 파일을 지정하면 됩니다.
1
2
3
"scripts": {
"purge": "purgecss --css ./dist/assets/*.css --output ./dist/assets/ --content ./dist/index.html ./dist/assets/*.js"
}
스크립트 추가 이후 다음 명령어를 입력하여 불필요한 CSS 파일을 제거할 수 있습니다.
1
npm run purge
PurgeCSS에 의해서 매칭되지 않는 클래스가 제거된 결과, 다음과 같이 사용하지 않는 CSS 코드 비율이 2.8%로 크게 줄어든 것을 확인할 수 있습니다.
