``` > 리액트 공식 문서에서는 라우트 파일에서 코드 스플리팅을 하기를 권장합니다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느 정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용하지 않습니다. - 저희 프로젝트에서도 router.js 파일에 코드 스플리팅을 적용하였습니다.

# 결과 - 코드 스플리팅 적용 후, 수치들이 어떻게 변화했는지 한번 비교해보겠습니다.

- 하나의 번들로 초기에 한번에 로딩됨을 알 수 있습니다.

- 적용 후에는 초기에 불러져 오는 번들이 훨씬 작아졌음을 알 수 있습니다. 코드 스플리팅을 통해 번들이 잘 나뉘어졌습니다. 다만 lodash 라이브러리는 최적화할 필요가 있어보입니다.

- 코드 스플리팅 전에도 수치들이 나쁘진 않아보입니다.

- 오히려 더 느려진 수치도 있지만 전체적인 LightHouse 점수는 크게 올랐습니다.

- 적용전 수치입니다.

- load 시간이 미미하지만 조금은 빨라졌습니다. # 마무리 - 적용 후 비교까지 해봤는데, 매번 다르게 값들이 나오므로 정확하게 비교는 힘든것 같습니다. 하지만 코드 스플리팅이 하는 역할이 무엇인지, 번들, 동적 import 등을 찾아보는 좋은 시간이었습니다. > 다만 코드 스플리팅 적용 시, 컴포넌트 깜빡임 문제가 생겼습니다. 이에 대한 최적화는 필요할 것으로 보입니다.

suspense

코드 스플리팅을 적용해보자