번들 사이즈 줄이기 React

[Dolphin-PC]

• [x] 번들 사이즈 줄이기 React
  • Vite Bundle Analyzer를 사용하여 번들 사이즈 시각화 및 크리티컬 리소스 식별하기.
  • Code Split / Tree shaking
    • 동적 임포트(dynamically import) 및 코드 스플리팅으로 초기 브라우저가 다운로드하는 자바스크립트 번들 사이즈 줄이기

[Dolphin-PC]

Bundle Size

• 번들링에서 “크리티컬 리소스(critical resource)“는 웹 페이지의 초기 로딩 성능에 중요한 영향을 미치는 리소스를 의미

  • loadash 가 가장 큰 사이즈 인것을 알 수 있다.

• 총 번들링 사이즈 : 2.13MB

  

[Dolphin-PC]

📏 1. Lodash 트리쉐이킹

1. 2.13MB -> 1.61MB (0.52MB 감소)

더 이상의 유의미한 결과를 얻을 요소가 없는 것 같다...

[Dolphin-PC]

코드 스플릿

• SPA는 초기 로딩 시, 모든 파일들을 로드 한다.
• 이를 방지하기 위해, dynamic을 통해 lazy로딩을 하면 된다.

트리 쉐이킹

• 불필요한 모듈을 없애는 과정으로,
• import 시, import all from "library" 가 아닌 import {specify} from "library"로 사용할 것들만 import 하면 된다.