Refactor(client): bundle size optimization#199
Open
constantly-dev wants to merge 5 commits intodevelopfrom
Open
Refactor(client): bundle size optimization#199constantly-dev wants to merge 5 commits intodevelopfrom
constantly-dev wants to merge 5 commits intodevelopfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough이 PR은 코드 스플리팅과 동적 임포트를 통해 번들 최적화를 구현합니다. React.lazy를 사용하여 페이지 컴포넌트를 지연 로딩하고, Suspense로 로딩 상태를 처리하며, Vite 설정에서 번들 분석 및 수동 청크 생성을 추가합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant MainBundle
participant LazyChunk as Lazy<br/>Chunk
participant SuspenseFallback
User->>Browser: 애플리케이션 접속
Browser->>MainBundle: 메인 번들 로드
MainBundle->>Browser: 초기 UI 렌더링 (Layout + Outlet)
Note over Browser,Outlet: Outlet 컴포넌트 마운트
User->>Browser: 페이지 네비게이션 (e.g., MyBookmark)
Browser->>SuspenseFallback: Suspense 폴백 표시<br/>(Loading...)
par 백그라운드 청크 로드
Browser->>LazyChunk: 지연 로딩 청크 요청
LazyChunk->>Browser: 청크 로드 완료
end
Browser->>Browser: 컴포넌트 마운트
SuspenseFallback->>User: 실제 페이지 콘텐츠 표시
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
추가 검토 항목:
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ 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. Comment |
|
✅ Storybook chromatic 배포 확인: |
![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 (3)
apps/client/vite.config.ts (2)
7-7: visualizer 자동 열기 동작을 환경에 따라 조건부로 설정하는 것을 고려하세요.
open: true설정은 매 빌드마다 브라우저를 자동으로 열어 개발 중에 번거로울 수 있습니다.다음과 같이 환경 변수를 통해 조건부로 설정하는 것을 권장합니다:
- visualizer({ filename: 'dist/bundle-analysis.html', open: true }), + visualizer({ + filename: 'dist/bundle-analysis.html', + open: process.env.ANALYZE === 'true' + }),그런 다음 package.json에 별도의 스크립트를 추가할 수 있습니다:
"scripts": { "build:analyze": "ANALYZE=true turbo run build" }Also applies to: 21-21
23-40: manualChunks의 경로 매칭 로직을 더 견고하게 개선할 수 있습니다.현재 구현은 작동하지만, 문자열 포함 검사는 오탐 가능성이 있습니다.
더 정확한 패키지 매칭을 위해 다음과 같이 개선할 수 있습니다:
manualChunks: (id: string) => { - if ( - id.includes('node_modules/react/') || - id.includes('node_modules/react-dom/') || - id.includes('node_modules/react-router-dom/') - ) { + if (id.includes('node_modules')) { + if (/[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/.test(id)) { - return '@react-vendor'; + return '@react-vendor'; + } + if (/[\\/]node_modules[\\/]framer-motion[\\/]/.test(id)) { + return '@framer-motion-vendor'; + } } - if (id.includes('node_modules/framer-motion/')) { - return '@framer-motion-vendor'; - } },이렇게 하면 경로 구분자를 정확히 매칭하여 오탐을 방지할 수 있습니다.
apps/client/src/layout/Layout.tsx (1)
3-3: Suspense fallback UI를 개선하는 것을 고려하세요.Suspense 래퍼 구현은 올바르며 lazy-loaded 라우트와 잘 통합됩니다. 다만 현재 fallback이 너무 단순하여 프로덕션 환경에서는 UX 개선이 필요합니다.
더 나은 사용자 경험을 위해 적절한 로딩 컴포넌트를 사용하는 것을 권장합니다:
+import LoadingSpinner from '@components/LoadingSpinner'; // 또는 적절한 로딩 컴포넌트 const Layout = () => { const location = useLocation(); const isOnboarding = location.pathname.startsWith('/onboarding'); return ( <> <div className="flex h-screen"> {!isOnboarding && <Sidebar />} <main className="bg-gray-bg flex-1 overflow-y-auto"> - <Suspense fallback={<div>Loading...</div>}> + <Suspense fallback={ + <div className="flex h-full items-center justify-center"> + <LoadingSpinner /> + </div> + }> <Outlet /> </Suspense> </main> </div> </> ); };또는 디자인 시스템에 이미 로딩 컴포넌트가 있다면 그것을 활용할 수 있습니다.
Also applies to: 14-16
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
apps/client/src/layout/Layout.tsx(2 hunks)apps/client/src/routes/router.tsx(1 hunks)apps/client/vite.config.ts(2 hunks)package.json(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: constantly-dev
Repo: Pinback-Team/pinback-client PR: 2
File: pnpm-workspace.yaml:3-3
Timestamp: 2025-08-18T13:48:59.065Z
Learning: constantly-dev는 docs 디렉터리를 컨벤션 문서 추가용으로 사용할 예정이라고 명시했습니다.
Learnt from: constantly-dev
Repo: Pinback-Team/pinback-client PR: 5
File: apps/extension/src/index.css:1-1
Timestamp: 2025-08-19T17:18:57.678Z
Learning: constantly-dev는 디자인 시스템 설정 PR 머지 후 `import 'pinback/tailwind-config/shared-styles.css';`를 `app.css`나 `index.css`에서 사용하여 공유 스타일을 관리할 계획입니다.
🧬 Code graph analysis (2)
apps/client/src/routes/router.tsx (1)
apps/client/src/pages/level/Level.tsx (1)
Level(12-73)
apps/client/src/layout/Layout.tsx (1)
apps/client/src/shared/components/sidebar/Sidebar.tsx (1)
Sidebar(24-236)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: storybook
🔇 Additional comments (3)
package.json (1)
29-29: LGTM!번들 분석을 위한 visualizer 플러그인 추가가 적절합니다. devDependencies에 올바르게 배치되었습니다.
apps/client/src/routes/router.tsx (2)
5-10: LGTM!React.lazy를 사용한 코드 스플리팅 구현이 올바르게 되어 있습니다. 번들 최적화에 효과적입니다.
1-1: Remind 컴포넌트의 eager 로딩이 의도적인지 확인하세요.다른 페이지는 모두 lazy 로딩을 사용하는 반면, Remind는 eager 로딩을 사용하고 있습니다. 이는 랜딩 페이지로서 즉시 로드되어야 하므로 합리적일 수 있지만, 번들 최적화 목표와 일관성을 위해 의도적인 선택인지 확인이 필요합니다.
만약 Remind도 lazy 로딩하려면 다음과 같이 수정할 수 있습니다:
-import Remind from '@pages/remind/Remind'; import { ROUTES_CONFIG } from '@routes/routesConfig'; import { createBrowserRouter } from 'react-router-dom'; import Layout from 'src/layout/Layout'; import { lazy } from 'react'; +const Remind = lazy(() => import('@pages/remind/Remind')); const MyBookmark = lazy(() => import('@pages/myBookmark/MyBookmark')); const Category = lazy(() => import('@pages/category/Category')); const Level = lazy(() => import('@pages/level/Level')); const OnBoarding = lazy(() => import('@pages/onBoarding/OnBoarding'));참고:
index: true로의 변경은 React Router v7의 올바른 패턴입니다.Also applies to: 18-19
jllee000
approved these changes
Dec 17, 2025
Comment on lines
+27
to
+32
| if ( | ||
| id.includes('node_modules/react/') || | ||
| id.includes('node_modules/react-dom/') || | ||
| id.includes('node_modules/react-router-dom/') | ||
| ) { | ||
| return '@react-vendor'; |
Collaborator
There was a problem hiding this comment.
옹 이런식으로, 무거운 청크들을 분리하고 최적화하는군녀~! 굿굿
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 Related Issues
📄 Tasks
번들 사이즈 최적화 진행
⭐ PR Point (To Reviewer)
https://peppered-parade-9ba.notion.site/2a9081ae8cf980698826d0264b44eb32?source=copy_link
노션으로 대체하겠습니다!
Summary by CodeRabbit
릴리스 노트
새로운 기능
최적화
Chores