~/csslab.dev/notes $ ls

// note

시각화 라이브러리 초기 번들 523KB → 22.3KB

  • 계층형 트리 시각화가 들어간 라우트의 초기 로딩 개선

증상

  • 라우트 진입이 무거움 — 라우트 번들 523KB, First Load JS 1.22MB

원인

  • 수천 노드 트리를 그리는 무거운 라이브러리가 초기 번들에 통째로 포함됨
  • 트리를 보지 않는 사용자도 진입 시점에 전부 내려받고 있었음

조치

  • 트리 시각화 컴포넌트를 dynamic import로 감싸 초기 로드에서 들어냄
  • 초기엔 껍데기만 그리고, 실제 트리 렌더가 필요한 시점에 라이브러리 청크를 따로 로드

결과

  • 라우트 번들 523KB → 22.3KB, First Load JS 1.22MB → 683KB
  • 전체 빌드 시간은 유의미하게 안 바뀜 — 개선 지점은 런타임 초기 번들 크기

같은 트리를 렌더 비용 측면에서 다룬 노트 → 수천 노드 트리를 10초에서 2초로