[프론트엔드 최적화] 불필요한 css 제거

 

사용하지 않는 css를 제거하여 웹페이지 성능을 개선할 수 있다.

 

1. F12로 개발자도구 켠 뒤 ESC 누르기

 

2. more에서 coverage 탭 선택

 

 

3. coverage 탭 안에 여러 항목들이 뜨는데, 만약 안뜨면 새로고침 누르면 많은 것들이 좌라락 뜬다.

 

 

 

4. 빨간 막대의 비율이 사용하고 있지 않는 리소스의 비율(44%를 사용하고 있지 않다)

 

 

5. Type이 CSS 인 파일을 클릭하면(지금 내 화면에는 없다) 소스코드가 쭉 나오는데,

빨간색으로 표시된 코드가 '불러들였으나 사용한 적이 없다'는 부분이다.

 

 

6. 퍼지CSS (https://purgecss.com) 라는 툴을 사용하여 정리할 수 있다.

purge css는 스태틱한 파일을 읽어서(동적인 부분을 지원하기도 한다) 사용하지 않는 부분을 제거해주는 역할을 한다.

 

 

7. 적용하면 용량이나 미사용 %가 드라마틱하게 줄어들긴 하지만, 아무래도 정적인 static 파일을 문자열로 비교하는 방식이기 때문에, 사용하지 않는 부분이 여전히 남아있긴 하다 (무시 가능한 수준)

 

 

8. (문제가 되는 부분) 문자열을 검사할 때, lg:m-8를 lg로 잘라버리는 경우가 있을 수 있다. (=스타일 깨져버림)

이런 현상을 방지하기 위해서는 purge css의 config 파일을 설정해주어야 한다.

(purgecss.config.js 파일 생성 후 정규식 작성)