chore: rollup-plugin-visualizer 설치 및 성능 유지를 위한 조건부 빌드 설정#195
chore: rollup-plugin-visualizer 설치 및 성능 유지를 위한 조건부 빌드 설정#195xaexunxang merged 1 commit intodevelopfrom
Conversation
WalkthroughVite 빌드 시 번들 분석을 위한 Changes
Sequence Diagram(s)sequenceDiagram
participant Developer
participant NPM_Script
participant Vite
participant Visualizer
Developer->>NPM_Script: npm run build:analyze
NPM_Script->>Vite: ANALYZE=true vite build
Vite->>Visualizer: (ANALYZE=true) 플러그인 활성화
Visualizer->>Vite: 번들 분석 및 analyze.html 생성
Vite->>Developer: 분석 결과 브라우저로 자동 오픈
Possibly related issues
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
vite.config.ts (1)
56-66: 빌드 설정 개선과 미래 계획이 잘 반영되었습니다.소스맵 활성화는 번들 분석에 도움이 되며, 주석 처리된 manual chunks 설정은 향후 코드 분할 최적화를 위한 좋은 준비입니다. React와 React Router를 별도 청크로 분리하는 전략이 합리적입니다.
향후 코드 분할 적용 시 다음 사항들을 고려해보세요:
- lodash와 같은 유틸리티 라이브러리도 별도 청크로 분리
- 라우트 기반 코드 분할 적용
- 청크 크기 최적화를 위한 임계값 설정
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (2)
package.json(2 hunks)vite.config.ts(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: storybook
🔇 Additional comments (5)
package.json (2)
9-9: 번들 분석 스크립트가 적절하게 구성되었습니다.
ANALYZE=true환경변수를 통해 조건부로 번들 분석을 활성화하는 방식이 깔끔하고 효율적입니다. 개발자가 필요할 때만 분석 도구를 실행할 수 있어 성능상 이점이 있습니다.
68-68: rollup-plugin-visualizer 의존성 추가를 승인합니다.버전 ^6.0.3은 안정적인 버전이며, 개발 의존성으로 분류되어 프로덕션 번들에 영향을 주지 않습니다. 번들 시각화 분석에 적합한 선택입니다.
vite.config.ts (3)
1-1: 필요한 import 구문이 적절하게 추가되었습니다.
PluginOption타입과visualizer플러그인을 위한 import가 정확히 추가되어 타입 안전성과 기능 구현을 지원합니다.Also applies to: 7-7
12-12: 환경변수 기반 조건부 활성화가 효율적입니다.
process.env.ANALYZE체크를 통해 분석 모드를 제어하는 방식이 명확하고 성능에 최적화되어 있습니다.
17-30: visualizer 플러그인 설정이 포괄적이고 잘 구성되었습니다.조건부 플러그인 로딩 구현이 훌륭하며, visualizer 설정 옵션들이 번들 분석에 최적화되어 있습니다:
- treemap 템플릿으로 직관적인 시각화
- gzip/brotli 압축 크기 분석 포함
- 자동 브라우저 열기로 사용자 경험 향상
- PluginOption 타입 캐스팅으로 타입 안전성 확보
2 participants
프론트엔드 번들 사이즈 확인 (analyze.html)
기타 사항
yarn build:analyze할 때만 실행되도록 조건부 빌드 설정문제점
번들 최적화 전략
목적
Summary by CodeRabbit
New Features
build:analyze)가 추가되었습니다. 실행 시 번들 구조 시각화 리포트가 자동으로 생성됩니다.Chores