Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

⚡ Performance: 초기 로드 속도 개선 #290

Merged
merged 10 commits into from
Dec 5, 2024
Merged

⚡ Performance: 초기 로드 속도 개선 #290

merged 10 commits into from
Dec 5, 2024

Conversation

junyeokk
Copy link
Collaborator

@junyeokk junyeokk commented Dec 5, 2024 •
edited
Loading

🔨 테스크

Issue

문제 인식

  • rollup-plugin-visualizer 분석 결과 특정 라이브러리들이 큰 용량 차지
  • recharts: 20% (133.31KB)
  • framer-motion: 14.5% (96.15KB)
  • @radix-ui: 8% (52.62KB)
  • Admin 페이지가 필요하지 않은 상황에서도 번들에 포함되어 초기 로딩 속도 저하
  • DOMContentLoaded 이벤트가 191ms로 최적화 필요성 확인

최적화 전략

  • 코드 스플리팅으로 각 기능별 청크 분리

    • vendor, UI, animation 등 목적별 분리
    • 불필요한 초기 로드 방지

  • 라우트 레벨 코드 스플리팅 적용

    • Admin 페이지 분리하여 필요시에만 로드
    • React lazy와 Suspense 활용

📋 작업 내용

  • vite.config.ts에 manualChunks 설정 추가
  • rollup-plugin-visualizer 도구 도입
  • App.tsx에서 라우트 기반 코드 스플리팅 구현
  • Skeleton 컴포넌트를 활용한 LoadingPage 컴포넌트 추가

개선 결과

  • 초기 로딩 시간: 191ms → 55ms (71% 감소)
  • Admin 페이지 코드를 메인 페이지 초기 로드에서 제외

📷 스크린 샷

before

image
image
image

after

image
image
image

@junyeokk junyeokk added the ⚡ Performance 성능 개선 label Dec 5, 2024
@junyeokk junyeokk requested a review from jungmyunggi December 5, 2024 07:38
@junyeokk junyeokk self-assigned this Dec 5, 2024
@junyeokk junyeokk linked an issue Dec 5, 2024 that may be closed by this pull request
[FE] 초기 로드 속도 개선 #283
Closed
8 tasks
@junyeokk junyeokk modified the milestone: 리팩토링을 한다. Dec 5, 2024
jungmyunggi
jungmyunggi approved these changes Dec 5, 2024
View reviewed changes
Copy link
Collaborator

@jungmyunggi jungmyunggi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

동적import로 성능이 많이 좋아지네요
👍

@junyeokk junyeokk merged commit af6efc7 into main Dec 5, 2024
1 check passed
@junyeokk junyeokk deleted the refactor/reduce-bundler-size branch December 5, 2024 08:47
@junyeokk junyeokk changed the title ⚡ Performance: 번들 사이즈 줄여 초기 로드 속도 개선하기 ⚡ Performance: 초기 로드 속도 개선 Dec 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jungmyunggi jungmyunggi jungmyunggi approved these changes

Assignees

@junyeokk junyeokk

Labels
⚡ Performance 성능 개선
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[FE] 초기 로드 속도 개선
2 participants
@junyeokk @jungmyunggi