SP-694 메인페이지, 모집공고 모아보기 페이지 성능 개선

[SungHyun627]

💡 다음 이슈를 해결했어요.

• 코드 스플리팅 적용
• vite 설정에서 GA, GTM config 제거

💡 이슈를 처리하면서 추가된 코드가 있어요.

🛠 코드 스플리팅 적용

페이지 라우터를 기반으로 코드 스플리팅을 적용시켜 초기 JS 번들 사이즈를 줄이고자 하였습니다.
코드 스플리팅을 적용할 페이지 컴포넌트를 default export로 설정하여, 동적으로 import 하였습니다.
또한 Suspense를 적용할 페이지를 children으로 받는 SuspenseWrapper를 작성하고, 로딩 시 보여줄 로딩 컴포넌트를
fallback인자로 전달하였습니다.

✔︎ 동적 import, SuspenseWrapper

ludo-frontend/src/Router/index.tsx

Lines 16 to 34 in 34bd262

	const LoginPage = lazy(() => import('@/Pages/Login'));
	const SignUpPage = lazy(() => import('@/Pages/SignUp'));
	const RecruitmentDetailPage = lazy(() => import('@/Pages/RecruitmentDetail'));
	const StudyDetailPage = lazy(() => import('@/Pages/StudyDetail'));
	const ApplicantsPage = lazy(() => import('@/Pages/Applicants'));
	const CreateStudyPage = lazy(() => import('@/Pages/Studies/CreateStudy'));
	const ModifyStudyPage = lazy(() => import('@/Pages/Studies/EditStudy'));
	const CreateRecruitmentPage = lazy(() => import('@/Pages/CreateRecruitment'));
	const LoginFailPage = lazy(() => import('@/Pages/LoginFail'));
	const SignUpFailPage = lazy(() => import('@/Pages/SignUpFail'));
	const MyPageHome = lazy(() => import('@/Pages/MyPageHome/index'));
	const NotificationsSettings = lazy(() => import('@/Pages/NotificationsSettings'));
	const ReviewPage = lazy(() => import('@/Pages/Review'));
	const Notifications = lazy(() => import('@/Pages/Notifications'));
	const MyPageReviews = lazy(() => import('@/Pages/MyPageReviews'));
	const SuspenseWrapper = ({ children }: { children: React.ReactNode }) => (
	<Suspense fallback={<Loading />}>{children}</Suspense>
	);

✔︎ 코드 스플리팅 적용

ludo-frontend/src/Router/index.tsx

Lines 122 to 129 in 34bd262

	{
	path: ROUTES.STUDY.DETAIL,
	element: (
	<SuspenseWrapper>
	<StudyDetailPage />
	</SuspenseWrapper>
	),
	},

🛠 Vite 설정에서 GA, GTM config 제거

이전에 구축한 GA, GTM 관련 Vite 설정으로 인해, 관련 네트워크 페이로드 및 Request가 상당부분 있는 것을 파악했습니다. 이를 없애기 위해 Vite 설정에서 GA, GTM config를 제거하였습니다.

✅ 셀프 체크리스트

• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있습니다. (master/main이 아닙니다.)
• 커밋 메세지를 컨벤션에 맞추었습니다.
• 변경 후 코드는 컴파일러/브라우저 warning/error 가 발생시키지 않습니다.
• 변경 후 코드는 기존의 테스트를 통과합니다.
• 테스트 추가가 필요한지 검토해보았고, 필요한 경우 테스트를 추가했습니다.
• docs 수정이 필요한지 검토해보았고, 필요한 경우 docs를 수정했습니다.

[github-actions]

💡 LightHouse Reports

🟢 90 ~ 100    🟠 50 ~ 89    🔴 0 ~ 49

🖥 Desktop

📄 메인

Category	Score
🔴 Performance	48
🟢 Accessibility	95
🟢 Best practices	96
🟢 SEO	92
🔴 First Contentful Paint	3.5 s
🔴 Largest Contentful Paint	7.2 s
🔴 Speed Index	4.4 s
🟢 Total Blocking Time	50 ms
🟠 Cumulative Layout Shift	0.18

📄 로그인

Category	Score
🔴 Performance	47
🟢 Accessibility	95
🟢 Best practices	96
🟢 SEO	92
🔴 First Contentful Paint	3.3 s
🔴 Largest Contentful Paint	7.0 s
🔴 Speed Index	3.7 s
🟢 Total Blocking Time	30 ms
🟠 Cumulative Layout Shift	0.21

📄 모집공고 모아보기

Category	Score
🔴 Performance	49
🟢 Accessibility	91
🟢 Best practices	96
🟢 SEO	92
🔴 First Contentful Paint	3.3 s
🔴 Largest Contentful Paint	7.0 s
🔴 Speed Index	3.7 s
🟢 Total Blocking Time	70 ms
🟠 Cumulative Layout Shift	0.18

📄 모집공고 상세

Category	Score
🟠 Performance	55
🟠 Accessibility	87
🟢 Best practices	96
🟠 SEO	83
🔴 First Contentful Paint	3.1 s
🔴 Largest Contentful Paint	7.1 s
🔴 Speed Index	3.6 s
🟢 Total Blocking Time	60 ms
🟢 Cumulative Layout Shift	0.095

📱 Mobile

📄 메인

Category	Score
🔴 Performance	44
🟢 Accessibility	95
🟠 Best practices	89
🟢 SEO	92
🔴 First Contentful Paint	20.1 s
🔴 Largest Contentful Paint	42.8 s
🔴 Speed Index	20.1 s
🟠 Total Blocking Time	460 ms
🟢 Cumulative Layout Shift	0.005

📄 로그인

Category	Score
🔴 Performance	34
🟢 Accessibility	95
🟢 Best practices	100
🟢 SEO	92
🔴 First Contentful Paint	18.8 s
🔴 Largest Contentful Paint	42.9 s
🔴 Speed Index	18.8 s
🟠 Total Blocking Time	390 ms
🟠 Cumulative Layout Shift	0.24

📄 모집공고 모아보기

Category	Score
🔴 Performance	36
🟢 Accessibility	91
🟠 Best practices	89
🟢 SEO	92
🔴 First Contentful Paint	19.8 s
🔴 Largest Contentful Paint	42.5 s
🔴 Speed Index	19.8 s
🔴 Total Blocking Time	830 ms
🟢 Cumulative Layout Shift	0

📄 모집공고 상세

Category	Score
🔴 Performance	41
🟠 Accessibility	87
🟢 Best practices	93
🟠 SEO	83
🔴 First Contentful Paint	18.8 s
🔴 Largest Contentful Paint	43.0 s
🔴 Speed Index	18.8 s
🟠 Total Blocking Time	530 ms
🟢 Cumulative Layout Shift	0.065