사용하지 않는 코드 확인하기
Intro
기다리는걸 좋아하는 사람은 단 한명도 없습니다. 사용자 중 절반이상이 로드하는데 3초이상 기다리는 경우 웹사이트를 이탈합니다. 1
사용하지 않는 코드를 제거하여 JS, CSS 파일의 크기를 최소화 하거나, lazy loading 해야합니다. 어떤 코드를 사용하지 않는지 확인하는 방법을 알아보려 합니다.
사용 방법
스텝 2
- Coverage 탭 활성화: DevTools 맞춤 설정 및 제어 > 도구 더보기 > 커버리지
- 녹화 하기
- 페이지 로딩
결과 화면
사용한 코드와 불필요한 코드 구별
파랑색과 빨강색 vertical line으로 구별할 수 있다.
개선 방법
Lazy Loading
현재 사용하진 않고 유저의 행동에 의해 사용되어질 코드라면, lazy loading을 적극 활용해볼만 하다.
이미지 로딩, script를 필요할 때 로딩하는 방법도 고민해보자
Tree Shaking
webpack을 사용한다면, 우리가 사용하고 있는 library의 최신버전을 확인하여 tree shaking이 되는지 확인해보자.
지원된다면, 적극 활용에 빌드 시 꼭 필요한 코드들만 모아서 번들링 하기때문에 불필요한 코드를 제거할 수 있다.
마무리
optimization은 굉장히 중요한 일이지만 이 일에 많은 리소스도 쏟을 수 도 없다. 적정한 선까지 해결하고 쌓여있는 다른 이슈들을 해결하여 서비스가 전반적으로 탄탄하게 만들어야 한다는걸 명심하자.
web.dev > 사용하지 않는 코드 제거를 정리한 글 입니다.