PurgeCSS로 사용하지 않는 CSS 한 방에 제거하기: 웹 성능 최적화 팁
한번에 CSS를 정리 할 수 있는 방법 없을까??
지난 1년간 우리 Q&A플랫폼은 많은 개선이 있었고 또 사라지는 기능도 있었고 정말 엄청난 변화를 겪었다. 그 과정에서 추가된 기능에 대한 CSS 가 많이 추가 되었다.
하지만 사용되지 않는 CSS 에 대한 코드리뷰 및 검토는 확인해 보니까 많이 이루어 지지 않았다. 삭제된 기능에 대해서 CSS가 같이 사라져야 하는데 이 또한 코드리뷰 및 검토가 제대로 이루어 지지 않았다.
이번에 Dev Balance Game 이라고 약간 개발자들이 들어와서 코딩에 집중이 잘 되는 시간은? 낮 vs 밤 요런 느낌의 아주 간단한 투표 UI 를 메인 페이지에 올리려고 하면서 사람들이 잘 보지 않는 기능을 삭제하였다. 이 과정에서 새로운 CSS와 삭제될 CSS를 골라야 했다. 물론! 다 삭제했다고 생각했지만 솔직히 뭔가 빠뜨렸을거 같고 이러다간 또 쓸모 없는 친구들이 계속 남아 있을거 같았기에 확실한 방법을 찾기로 했다
Purgecss
구글링을 열심히 해봤더니 purgecss 라는 아주 기가 막힌 Tool 이 있었다! 바로 내가 html, js을 지정해주고 그리고 css 파일을 지정하면 된다! 너무 간단해서 놀라웠다…. 우선 npm install 을 통해서 purgecss 를 설치한다음
1
purgrcss --css {csspath}/*.css --content {jspath}/*.js --content {htmlpath}/*.vm --output {csspath}
우리는 velocity 를 사용해서 html 이 아니고 vm file 인데도 잘 호환되어서 더욱 좋았다!
실행한 결과는 너무 충격적이었다… 무려 총 1천줄이 삭제된 것이다! 기분이 좋았지만! 한편으로는 반성하는 계기가 되기도 하였다! 1천줄이 줄었다는건 css 를 server로 부터 받는 시간도 그만큼 줄었다는 것이니까 너무 뿌듯하다 앞으로는 purgecss 과정을 CI 과정에 추가하여 앞으로는 계속 주시할 예정이다!