Split heavy recharts and react-simple-maps dependencies into their own vendor chunk

[Jagadeeshftw]

📌 Description

vite.config.ts only carves react-intl/@formatjs/intl-messageformat into an i18n-vendor chunk. The charting (recharts) and mapping (react-simple-maps, d3-geo) libraries are large and used by only a few pages (DataPage, ApplicationsChart, leaderboard map). Extend manualChunks to isolate recharts/d3/react-simple-maps into a dedicated viz-vendor chunk so they cache independently and stay out of the main chunk.

💡 Why it matters: Bundling charts/maps into the main chunk bloats first load for users who never open analytics pages.

🧩 Requirements and context

• Extend manualChunks(id) to return 'viz-vendor' for recharts, d3, d3-geo, and react-simple-maps.
• Keep the existing i18n-vendor rule.
• Confirm the main index-*.js chunk shrinks and stays within the bundle budget.
• Validate via npm run analyze and npm run test:bundle-size.

Non-functional requirements

• Must be secure, tested, and documented.
• Should be efficient and easy to review.

🛠️ Suggested execution

1. Fork the repo and create a branch

git checkout -b perf/viz-vendor-chunk

2. Implement changes

• Write/modify the relevant source: vite.config.ts
• Write comprehensive tests: bundle-size script
• Add documentation: README bundle analysis note
• Include TSDoc doc comments where touched
• Validate security assumptions: no behavior change, only chunking

3. Test and commit

• Run tests:

npm run build && npm run test:bundle-size && npm run analyze

• Cover edge cases: ensure no circular chunk issues
• Include test output and security notes in the PR description.

Example commit message

perf(build): isolate recharts and maps into viz-vendor chunk

✅ Acceptance criteria

• viz-vendor chunk emitted
• Main chunk size reduced
• Bundle budget still passes
• i18n-vendor rule preserved

🔒 Security notes

Chunk splitting must not alter module evaluation order in a way that breaks runtime.

📋 Guidelines

• Minimum 95% test coverage
• Clear documentation
• Timeframe: 96 hours

[GBOYEE]

Approach

1. Audit — Identify heavy deps (recharts, react-simple-maps) via bundle analyzer
2. Manual chunks — Configure vite build.rollupOptions.output.manualChunks to separate vendor bundles
3. Lazy loading — Use React.lazy + Suspense for routes using heavy libs (only load when needed)
4. Preload — Add prefetch hints for likely-next routes
5. Verify — Run build, confirm vendor chunks are separate and initial bundle shrinks
6. Metrics — Report before/after bundle sizes

Quick win. Ready now.

[clintjeff2]

Hello, I have 6 years of experience working on tasks like this and handling similar challenges across backend, frontend, and smart-contract development. I have carefully read and fully understood the task requirements, and I am confident I can deliver a clean, efficient, and well-tested solution promptly. I always ensure high-quality implementation, maintainability, and adherence to best practices.

Pull request in 5 hours.

[gloskull]

Hi, I’d love to work on this issue. I have 4 years of experience across backend, frontend, full-stack, and smart contract development. I understand the task clearly and can deliver a clean, efficient, well-tested solution on time, with strong focus on code quality and maintainability. My PR will be submitted in under 10 hours.

[grantfox-oss]

🦊 GrantFox — @clintjeff2 has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #300)
2. Your PR will be reviewed by the Grainlify maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@clintjeff2's PR #381 was approved and merged by @Jagadeeshftw.

🏆 @clintjeff2: You earned 45 FoxPoints for this contribution! Your current tier: Specialist (4,091 total points). Track your full progress on GrantFox.

👏 Great work, @clintjeff2! Keep contributing to Grainlify.