초기 번들 최적화 분석

목표와 측정 기준

이 개선은 로그인 후 기본 홈 경로에서 즉시 내려받는 JavaScript 진입 청크를 500kB 미만으로 낮추는 것을 목표로 한다. 수치는 Vite 프로덕션 빌드의 minify 이후 비압축 크기이며, index.html이 직접 참조하는 JavaScript 파일을 초기 진입 청크로 정의한다.

측정 단계	초기 진입 청크	gzip	변화
기존 main (0dc3ba4)	1,089,318B	301.93kB	기준
관리자·디렉터리 라우트 분리	844,698B	262.84kB	관리자 전용 코드 분리
관리자·디렉터리·에디터 분리	437,101B	132.80kB	목표 달성

적용한 분리 경계

/admin과 /admin/directory-operations는 React.lazy 및 Suspense를 통해 각각 독립 청크로 전환했다. 따라서 게시판 기본 경로를 방문하는 사용자는 관리자, 권한, 첨부파일 관리, API 관리 UI를 초기 다운로드하지 않는다. 공통 라우트 대기 화면은 접근 가능한 role="status"를 제공한다.

홈 화면에서 사용하는 Tiptap 편집기는 게시물 작성 또는 인라인 편집을 시작할 때만 필요하다. 두 편집 진입점의 정적 import를 제거하고 같은 RichTextEditor 동적 import로 전환했다. 그 결과 편집기와 Tiptap 생태계는 RichTextEditor 지연 청크로 분리되며, 기본 열람 흐름에는 포함되지 않는다.

지연 청크	크기	로드 시점
관리자 화면	233,475B	/admin 진입 시
디렉터리 운영 화면	10,613B	/admin/directory-operations 진입 시
리치 텍스트 편집기	407,466B	게시물 작성 또는 편집 UI 표시 시
비디오 라이브러리	11,845B	/videos 진입 시

판단과 후속 권고

이번에는 manualChunks로 단순히 라이브러리를 인위적으로 나누지 않았다. 해당 방식은 개별 파일 크기 경고를 낮출 수 있지만, 홈 화면이 여전히 모든 분리된 공급자 청크를 요청한다면 실제 초기 전송량을 줄이지 못할 수 있다. 대신 경로 및 상호작용에 따라 필요해지는 기능을 지연 로딩해 초기 요청 집합 자체를 줄였다.

향후 초기 진입 청크가 다시 증가하면 다음 순서로 검토한다.

우선순위	방안	기대 효과와 주의점
1	정적 import 감사	홈 경로에 새로 추가되는 대형 라이브러리·관리 전용 기능을 다시 지연 경계 뒤로 이동한다.
2	빌드 크기 예산 자동화	CI에서 HTML이 참조하는 초기 JavaScript 청크가 500kB 이상이면 실패하도록 검사한다.
3	manualChunks의 제한적 도입	React 및 재사용 공급자 코드를 캐시 가능한 청크로 구분한다. 다만 청크 수 증가와 초기 요청 총량을 함께 측정한다.
4	대형 기능의 세부 분리	관리자 내부의 API 탐색기·감사 화면처럼 탭별로 사용 빈도가 낮은 기능을 한 단계 더 나눈다.

운영에서 반드시 확인할 지표는 단일 파일 크기만이 아니라, 첫 화면에서 브라우저가 실제로 요청한 JavaScript 총량과 사용자 상호작용 시 지연 청크가 준비되는 체감 시간이다.