이 방법은 적용하기 전 npm run serve 스크립트로 실행된 서비스를 Lighthouse로 검사해보자

주목할 부분은 Opportunities 섹션의 ‘Reduce unused CSS’ 항목임

Lighthouse 검사 결과 중 불필요한 CSS에 관한 항목

해당 항목은 사용하지 않는 CSS 코드를 제거하면 성능에 긍정적인 영향을 줄 수 있다는 의미임

세부 내용을 살펴보면 main.chunk.css가 2189KiB인데, 사용하지 않는 코드를 제거하면 2184KiB를 줄일 수 있다고 함

조금 더 자세하게 살펴보기 위해 Lighthouse가 아닌 Coverage 패널을 이용해 보겠음

Coverage 패널은 페이지에서 사용하는 자바스크립트 및 CSS 리소스에서 실제로 실행하는 코드가 얼마나 되는지 알려주며 그 비율을 표시해 줌

따라서 이 패널을 통해 서비스 코드에 불필요한 코드가 얼마나 있는지 확인할 수 있음

사용법은 간담함. 상단의 새로고침 버튼을 클릭하면 됨. 그러면 페이지가 새로고침되면서 그 과정에서 실행한 코드를 리소스별로 표시

오른쪽 Unused Bytes(사용하지 않는 바이트)와 Usage Visualization(사용량 시각화) 항목에서 전체 코드 대비 실행된 코드의 양을 비율로 보여줌

아래 두 리소스는 사이즈 자체가 작아서 크게 의미가 없지만 위쪽 두 리소스에서는 실행되지 않은 코드가 꽤 많음

먼저 자바스크립트 리소스인 2.chunk.js 파일을 보면 대략 39% 정도의 코드를 실행하지 않고 있다고 나옴

하지만 페이지를 Coverage 패널의 기록이 진행 중인 상태에서 페이지를 이동하고 기타 동작들을 해 보면 점점 코드 사용 비율이 증가함. 왜냐하면 자바스크립트의 경우 if문 같은 조건이 걸려 있어 분기되는 코드가 많아 이런 코드는 경우에 따라 실행이 안됐다가도 특정 동작에 의해 다시 실행되기도 하기 때문임. 그렇다 보니 자바스크립트의 커버리지는 어느 정도 감안해야 함

문제는 CSS 리소스임. 위의 그림에 따르면 사용하지 않는 main.chunk.css 파일의 코드가 무려 99%나 된다고 함. CSS는 자바스크립트와 다르게 별다른 분기가 있지도 않은데 말임. 해당 항목을 눌러 보면 Source 패널에서 해당 코드가 뜨면서 어떤 코드가 실행되었고 어떤 코드가 실행되지 않았는지 자세히 볼 수 있음. 코드 왼쪽에 파란 막대는 해당 코드가 실행되어 적용되었다는 의미이고, 빨간 막대는 실행되지 않았다는 의미임

Coverage 패널을 통해 연 Sources 패널

실행되지 않은 CSS 코드를 살펴보면 상당히 많은 유틸 클래스가 사용되지 않았음을 알 수 있음

이 클래스들은 모두 Tailwind CSS 라이브러리에서 추가된 것으로, 개발할 때는 미리 만들어진 클래스를 통해 쉽고 빠르게 스타일을 적용할 수 있다는 장점이 있었지만 막상 빌드하고 나니 사용하지 않은 스타일도 함께 빌드되어 파일의 사이즈를 크게 만든다는 단점이 있음. 그러면 이런 사용하지 않는 CSS 코드를 어떻게 제거할 수 있을까?