[chore] vite 청크 분리로 캐시를 최적화한다 #927
Conversation
- manualChunks 설정으로 라이브러리별 청크 분리 - Windows/PNPM 환경 호환을 위한 경로 정규화 추가 - react-* 패키지 매칭 순서 조정으로 정확한 청크 분류 - zustand + react-query를 state 청크로 통합 - sentry를 analytics 청크로 통합
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | Summary |
|---|---|
Build Configuration frontend/config/vite.config.ts |
build.rollupOptions.output.manualChunks(id) 추가로 node_modules 대상 패키지별(예: router, dates, markdown, react-vendor, state, react-query, analytics, sentry, motion, swiper 등) 청크 분리 로직 도입; rollup-plugin-visualizer import 추가(현재 미사용). |
Dependency Management frontend/package.json |
개발 의존성 rollup-plugin-visualizer: ^5.14.0 추가 |
Initialization Logic frontend/src/index.tsx |
initializeChannelService의 import 및 호출 삭제(앱 시작 시 채널 서비스 초기화 생략) |
Version Control & Docs .gitignore frontend/.cursorrules |
.gitignore에 .cursor/ 항목 추가; 프론트엔드 설계 가이드 문서 frontend/.cursorrules 삭제 |
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~25 minutes
- 집중 검토 항목:
frontend/config/vite.config.ts의manualChunks패턴이 의도한 모듈을 실제로 분리하는지(빌드 출력·캐시 영향) 확인- 번들 시각화 산출물 검사(
rollup-plugin-visualizer)로 청크 분할 및 크기 확인 frontend/src/index.tsx에서 채널 초기화 제거에 따른 런타임 영향(채널 의존 기능 여부) 검증- 삭제된 문서(
frontend/.cursorrules)가 팀 규약·참조로 필요했는지 대체 위치 확인
Possibly related issues
- [chore] MOA-420 vite 청크 분리로 캐시를 최적화한다 #926 — Vite 청크 분리 관련: manualChunks 추가로 캐시 최적화 목표와 직접 연관됨.
Possibly related PRs
- [chore] 빌드 툴 Webpack to Vite 전환 #844 — 이전 Vite 설정 변경(visualizer/manualChunks 관련) 이력과 코드 수준 연관성 있음.
Suggested labels
🌏 Deploy, 🔨 Refactor
Suggested reviewers
- seongje973
- suhyun113
- oesnuj
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Out of Scope Changes check | .cursorrules 파일 제거는 캐시 최적화 목표와 직접 관련이 없는 out-of-scope 변경입니다. | cursorrules 파일 삭제를 별도 PR로 분리하거나 제외하여 청크 분리 최적화 목표에 집중하세요. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | ✅ Passed | PR 제목이 청크 분리를 통한 캐시 최적화라는 주요 변경 사항을 명확하게 요약하고 있습니다. |
| Linked Issues check | ✅ Passed | 청크 분리 설정(vite.config.ts), 롤업 플러그인 의존성 추가(package.json), 채널 서비스 제거(index.tsx)로 MOA-420의 캐시 최적화 목표를 충족합니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
✨ Finishing touches
- 📝 Generate docstrings
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
chore/#926-vite-cache-performance-setting-MOA-420
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/config/vite.config.ts (1)
19-71:manualChunks분리 전략은 목표(캐시 효율)와 잘 맞습니다.
다만 지금처럼 조건문이 계속 늘어날 구조라, 규칙을 “매핑 테이블”로 빼서 추가/변경 비용을 낮추는 리팩터링을 고려해볼 만합니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
.gitignore(1 hunks)frontend/.cursorrules(0 hunks)frontend/config/vite.config.ts(1 hunks)frontend/package.json(1 hunks)frontend/src/index.tsx(0 hunks)
💤 Files with no reviewable changes (2)
- frontend/src/index.tsx
- frontend/.cursorrules
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/config/vite.config.ts
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/config/vite.config.ts
🧠 Learnings (1)
📚 Learning: 2025-11-15T08:13:58.854Z
Learnt from: lepitaaar
Repo: Moadong/moadong PR: 844
File: frontend/package.json:97-97
Timestamp: 2025-11-15T08:13:58.854Z
Learning: In frontend/package.json, the `tough-cookie` package is a dependency of `msw` (Mock Service Worker) used for cookie parsing and management. Both packages should be in devDependencies together.
Applied to files:
frontend/package.json
🔇 Additional comments (3)
.gitignore (1)
3-3:.cursor/ignore 추가는 적절합니다.
팀 내 Cursor 사용 시 로컬 설정/캐시가 커밋되는 것을 방지합니다.frontend/package.json (1)
95-95:rollup-plugin-visualizer5.14.0은 Vite 7.2.2과 호환됩니다.Rollup 4 및 표준 Vite 빌드 환경에서 완전히 지원되며, 모든 주요 옵션(
filename,open,gzipSize,brotliSize)이 v5.14.0에서 정상 작동합니다. CI 환경에서 자동 열기 동작이 필요 없으면open: false로 설정하여 관리하면 됩니다. (rolldown-vite를 사용하거나 Node ≥20인 경우 v6.x 업그레이드 검토)frontend/config/vite.config.ts (1)
22-69: 수동 청크 구성을 공식 Vite/Rollup 권장사항에 맞춰 개선하세요.현재 구현은 문자열
includes()방식으로 경로를 매칭하고 있으나, 공식 Rollup 문서는 크로스플랫폼 호환성을 위해/node_modules[\\/]/정규식 사용을 권장합니다. 또한 단순 경로 매칭보다 패키지명 추출 방식이 더 안정적입니다.구체적 개선 사항:
- 정규식
/node_modules[\\/]/으로 Windows/POSIX 경로 모두 대응- 전체 경로 대신 패키지명 기반 감지로 서브패스 변화에 대비
getModuleInfo()활용으로 정적/동적 임포트 구분 및 순환 의존성 방지 (선택)- 모든 플랫폼(Windows/macOS/Linux)에서 빌드 테스트
⛔ Skipped due to learnings
Learnt from: oesnuj Repo: Moadong/moadong PR: 529 File: frontend/config/webpack.common.ts:9-11 Timestamp: 2025-07-12T17:44:52.261Z Learning: 사용자로부터 피드백: webpack filesystem cache 경로에 대해 추측하지 말고 정확한 공식 문서를 먼저 확인할 것. .gitignore 내용도 스크립트 결과만 믿지 말고 다시 한번 검증할 것. 정확성이 매우 중요함.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
frontend/config/vite.config.ts (1)
12-17: Visualizer 플러그인open: true설정은 CI 환경에서 문제를 일으킬 수 있습니다.이전 리뷰에서 이미 지적된 내용입니다. CI/헤드리스 환경에서 브라우저 실행 시도로 인해 빌드 행(hang) 또는 실패가 발생할 수 있습니다. 조건부 활성화 또는
open: false설정을 권장합니다.
🧹 Nitpick comments (1)
frontend/config/vite.config.ts (1)
22-61: 청크 분리 로직이 PR 목표에 맞게 잘 구현되었습니다.라이브러리 의존성을 목적에 맞게 분류하여 캐시 효율성을 높이는 설정이 적절합니다.
react-datepicker와date-fns가 동일한dates청크로 그룹화되는 것도 의도된 동작으로 보입니다.선택적 개선 사항으로, 청크 이름들을 상수로 추출하면 오타 방지와 유지보수에 도움이 될 수 있습니다:
const CHUNKS = { ROUTER: 'router', DATES: 'dates', MARKDOWN: 'markdown', REACT_VENDOR: 'react-vendor', STATE: 'state', ANALYTICS: 'analytics', MOTION: 'motion', SWIPER: 'swiper', VENDOR: 'vendor', } as const;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
frontend/config/vite.config.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/config/vite.config.ts
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/config/vite.config.ts
#️⃣연관된 이슈
📝작업 내용
청크 분리에 대해
webpack이든 vite는 빌드를 하면 라이브러리 의존성 + 어플리케이션 모든 코드를 하나로 합쳐 하나의 JS 코드로 합칩니다.
이렇게 하나로 합쳤을 때 성능적인 문제가 발생합니다.
캐시
하나로 합쳐진
index-*.js내부에는 모든 라이브러리와 어플리케이션 코드가 합쳐져 있다고 앞전에 언급하였듯, 코드가 달라질 때마다 새롭게 빌드를 해야 합니다.그렇다면 어플리케이션 코드 또는 라이브러리 의존성이 바뀔 때마다
index-*.js의 해시값이 바뀌기 때문에,항상 재다운로드된다고 볼 수 있습니다.
재다운로드 시점
하지만 재다운로드되는 시점은 개발 시점에서는 거의 없습니다. vite에서는 hmr로 변경된 부분만 감지하여 (웹소켓 기반으로) 업데이트하는데,
이 과정에서 만들어지는 빌드 산출물이 없기 때문입니다.
재다운로드는 배포 시점에만 발생합니다. 그것도 딱 한 번, 배포 시점에만 발생하게 됩니다. 프로덕션 환경에서도 직접 어플리케이션 코드를
수정하거나 의존성이 바뀌는 경우가 없을 것이기 때문입니다.
청크 분리의 의의
청크를 분리한다면 거의 바뀌지 않는 부분(라이브러리 의존성)과 자주 바뀌는 부분(어플리케이션 코드)를 나누어
자주 바뀌는 부분의 재다운로드 비율을 감소시킬 수 있습니다.
하지만 앞에서 말했듯 배포시점에만 의미가 있고, 배포가 더 자주 일어나는 서비스에서 더더욱 이점을 가지게 될 것 입니다.
분리한 이유
이번 PR에서 청크를 분리한 이유는 번들 구성과 캐싱 효율을 고려해서 분리하게 되었습니다.
프로덕션 환경에서는 해시기반 파일명과 장기 캐시 정책으로
동일 배포 내 재다운로드는 거의 발생하지 않으며,변경이 있을 때는 해시가 변경된 chunk만 200으로 새로 내려받는 구조입니다.
재다운로드 비율 감소 자체가 목적이라기보다는, 변경 범위를 분리해 대용량 vendor 재다운로드를 방지가 목적이었습니다.
청크 나누기 전
index.js 파일이 1200kb가 넘어갑니다. visualizer로 봤을 때 파일도 두 개로만 분리되어 있네요.
기존에 AdminRoutes는 lazy 로드를 적용해놓아서 분리된 듯 합니다.
청크 나누기 후
청크로 나누니 index.js 파일이 154.81 kb로 줄었습니다. visualizer에서도 청크가 잘 분리된 것을 볼 수 있습니다.
결과
라이브러리 의존성은 거의 바뀌지 않는다고 가정했을 때, 어플리케이션 코드인 index.js의 재다운로드 용량이
1284.52 kb에서 154.81 kb로 줄어들었습니다.(-87.95%)
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
릴리스 노트
✏️ Tip: You can customize this high-level summary in your review settings.