Conversation
- manualChunks 설정으로 라이브러리별 청크 분리 - Windows/PNPM 환경 호환을 위한 경로 정규화 추가 - react-* 패키지 매칭 순서 조정으로 정확한 청크 분류 - zustand + react-query를 state 청크로 통합 - sentry를 analytics 청크로 통합
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| 코호트 / 파일(들) | 변경 요약 |
|---|---|
빌드 설정 최적화 frontend/config/vite.config.ts, frontend/package.json |
Vite 빌드 구성에 rollup-plugin-visualizer 임포트 추가. plugins 배열을 여러 줄 형식으로 재정렬. build.rollupOptions.output.manualChunks(id) 함수 도입으로 커스텀 코드 분할 구현: router, dates, markdown, react-vendor, state, react-query, analytics, sentry, motion, swiper 등 주요 모듈을 별도 청크로 격리하고, 나머지 node_modules는 vendor 청크로 통합. 개발 의존성에 rollup-plugin-visualizer@^5.14.0 추가. |
버전 제어 설정 .gitignore |
.cursor/ 디렉터리를 무시 대상에 추가. 기존 항목은 변경 없음. |
문서 제거 frontend/.cursorrules |
프론트엔드 설계 가이드라인 문서 파일 삭제. 코드 동작 및 공개 인터페이스에는 영향 없음. |
예상 코드 리뷰 노력
🎯 2 (Simple) | ⏱️ ~10 minutes
연관 이슈
- [chore] MOA-420 vite 청크 분리로 캐시를 최적화한다 #926: Vite 빌드 청크 분리를 통한 캐싱 최적화 구현과 직접 관련.
연관 PR
- [chore] 빌드 툴 Webpack to Vite 전환 #844: frontend/config/vite.config.ts를 수정하는 PR로, 웹팩에서 Vite로의 마이그레이션 이후 본 PR이 커스텀 청킹 로직을 추가하여 이어짐.
제안 라벨
🌏 Deploy
제안 리뷰어
- seongje973
- suhyun113
- oesnuj
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 inconclusive)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Out of Scope Changes check | ❓ Inconclusive | frontend/.cursorrules 파일 삭제가 설명된 이유와 충분히 명확하지 않습니다. 이 변경이 청크 분리 및 캐시 최적화 작업과의 관련성이 불명확합니다. | .cursorrules 파일 삭제의 필요성과 이유를 명확히 설명해주세요. 청크 분리 작업의 범위에 포함되지 않는다면 별도 PR로 분리 검토를 권장합니다. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | PR 제목이 주요 변경사항을 명확히 설명합니다. 'vite 청크 분리로 캐시를 최적화'는 Vite 설정 변경을 통한 청크 분리와 캐시 최적화라는 핵심 목표를 직접 반영합니다. |
| Linked Issues check | ✅ Passed | PR의 코드 변경사항이 연결된 이슈 MOA-420의 목표를 충족합니다. Vite 설정에서 manualChunks를 추가하여 자주 변경되는 코드와 라이브러리를 분리했으며, 시각화 도구를 추가하여 청크 분리 결과를 확인할 수 있도록 구성했습니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing touches
- 📝 Generate docstrings
📜 Recent review details
Configuration used: Organization 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 (2)
frontend/config/vite.config.tsfrontend/package.json
🚧 Files skipped from review as they are similar to previous changes (2)
- frontend/config/vite.config.ts
- frontend/package.json
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
LCP 개선을 우선으로 잡고 vite 청크 분리를 통한 캐싱을 진행했는데, lighthouse 점수가 막 좋아지진 않더라고요. |
seongwon030
deleted the
chore/#926-vite-cache-performance-setting-MOA-420
branch
2 participants
#️⃣연관된 이슈
📝작업 내용
청크 분리에 대해
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.