[FEAT] [HIGH-65] 초기 렌더링 향상을 위한 번들 최적화

[0Jaemin0]

User description

✨ PR 세부 내용

• lodash 전체 번들 포함 문제 해결
  • lodash.debounce만 개별 설치하여 불필요한 코드 제거
• manualChunks 설정 추가
  • react, react-dom, react-router-dom을 vendor 청크로 분리
• 번들 시각화를 위한 rollup-plugin-visualizer 도입

☑️ 체크리스트

🛠 기본 검사 항목

• ESLint 검사 완료
• Prettier 적용
• 함수, 변수, 파일 네이밍 검토
• 코드 작성 순서 (import, 내부 코드) 점검
• 폴더 구조에 맞는 파일 분리 여부 확인
• 코드 작성 스타일 점검

📸 스크린샷

lodash 최적화 전

lodash 최적화 후

✅ 리뷰 요구사항

번들 최적화를 진행하였으며, 서비스 이용 중 문제가 발생하면 말씀해 주시면 감사하겠습니다!

---

PR Type

Enhancement

---

Description

• Replace generic lodash import with lodash.debounce

• Add rollup-plugin-visualizer for bundle analysis

• Configure manualChunks to split vendor dependencies

• Update dependencies: remove unused and add new ones

---

File Walkthrough

	Relevant files
Enhancement	useDebouncedValue.ts Use `lodash.debounce` for debounce import                                src/hooks/common/useDebouncedValue.ts Imported lodash.debounce instead of full lodash Reduced bundle size by specific debounce import +1/-1
Configuration changes	vite.config.ts Add visualizer and vendor splitting config                              vite.config.ts Added rollup-plugin-visualizer plugin configuration Configured build.rollupOptions.output.manualChunks vendor split +22/-2
Dependencies	package.json Update dependencies for optimization                                          package.json Removed unused lodash and hls dependencies Added lodash.debounce, depcheck, rollup-plugin-visualizer Updated type definitions for lodash.debounce +4/-3

---

[netlify]

✅ Deploy Preview for lead-me ready!

Name	Link
🔨 Latest commit	6c1d99b
🔍 Latest deploy log	https://app.netlify.com/projects/lead-me/deploys/68903b7d31e79700083ab5a0
😎 Deploy Preview	https://deploy-preview-55--lead-me.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Unused Import useMemo is imported but not used in useDebouncedValue. Remove the unused import to keep the hook implementation clean and avoid lint warnings. import { useEffect, useMemo, useState } from "react"; import debounce from "lodash.debounce"; Visualizer in Production The visualizer plugin is always enabled, including in production builds. Consider gating it behind an environment variable or only activating it in analysis mode to avoid unnecessary overhead and prevent exposing detailed bundle reports in production. visualizer({ filename: "bundle-report.html", open: true, template: "treemap", gzipSize: true, brotliSize: true, }), ],

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Make visualizer optional Only include the visualizer plugin when explicitly analyzing the bundle to avoid slowing down every build by default. Wrap its inclusion in a conditional check (e.g. using an ANALYZE environment variable). src/vite.config.ts [9-19] plugins: [ react(), tsconfigPaths(), - visualizer({ - filename: "bundle-report.html", - open: true, - template: "treemap", - gzipSize: true, - brotliSize: true, - }), + ...(process.env.ANALYZE === "true" ? [ + visualizer({ + filename: "bundle-report.html", + open: true, + template: "treemap", + gzipSize: true, + brotliSize: true, + }) + ] : []), ], Suggestion importance[1-10]: 6 __ Why: Wrapping visualizer in an ANALYZE check prevents unnecessary bundling overhead on every build and improves build performance.	Low
	Automate vendor chunk splitting Use a dynamic manualChunks function to split all large dependencies into separate chunks automatically, improving caching and avoiding manual updates whenever dependencies change. src/vite.config.ts [23-25] -manualChunks: { - vendor: ["react", "react-dom", "react-router-dom"], +manualChunks(id: string) { + if (id.includes('node_modules')) { + return id + .toString() + .split('node_modules/')[1] + .split('/')[0]; + } }, Suggestion importance[1-10]: 5 __ Why: Using a dynamic manualChunks function reduces manual maintenance when dependencies change and enhances caching granularity.	Low