Web - 사용하지 않는 코드 확인하기

기다리는걸 좋아하는 사람은 단 한명도 없습니다. 사용자 중 절반이상이 로드하는데 3초이상 기다리는 경우 웹사이트를 이탈합니다.

 

Intro
사용하지 않는 코드를 제거하여 JS, CSS 파일의 크기를 최소화 하거나, lazy loading 해야합니다. 어떤 코드를 사용하지 않는지 확인하는 방법을 알아보려 합니다.

사용 방법
 - Coverage 탭 활성화: DevTools 맞춤 설정 및 제어 > 도구 더보기 > 커버리지
 - 녹화 하기
 - 페이지 로딩

 

결과 화면

사용한 코드와 불필요한 코드 구별

파랑색과 빨강색 vertical line으로 구별할 수 있다.

개선 방법
Lazy Loading
현재 사용하진 않고 유저의 행동에 의해 사용되어질 코드라면, lazy loading을 적극 활용해볼만 하다.
이미지 로딩, script를 필요할 때 로딩하는 방법도 고민해보자

Tree Shaking
webpack을 사용한다면, 우리가 사용하고 있는 library의 최신버전을 확인하여 tree shaking이 되는지 확인해보자.
지원된다면, 적극 활용에 빌드 시 꼭 필요한 코드들만 모아서 번들링 하기때문에 불필요한 코드를 제거할 수 있다.

마무리
optimization은 굉장히 중요한 일이지만 이 일에 많은 리소스도 쏟을 수 도 없다. 적정한 선까지 해결하고 쌓여있는 다른 이슈들을 해결하여 서비스가 전반적으로 탄탄하게 만들어야 한다는걸 명심하자.

web.dev > 사용하지 않는 코드 제거를 정리한 글 입니다.