Optimize frontend bundle size with code splitting and tree shaking

[jobbykings]

Description

Heavy dependencies like Three.js (@react-three/fiber, three), TensorFlow.js, Pyodide, and D3 significantly increase bundle size. Implement dynamic imports, route-based code splitting, and lazy loading for non-critical features (AR/VR, 3D lab, metaverse, BCI) to improve initial load time.

Files to Modify

• frontend/src/app/layout.tsx — Dynamic import config
• frontend/next.config.js — Bundle analyzer config
• Component files with heavy deps — Convert to dynamic imports
• frontend/src/components/ARVR/ — Lazy load all VR components
• frontend/src/components/Metaverse/ — Lazy load 3D components
• frontend/src/components/Lab/ — Lazy load lab sim

Definition of Done

• All non-critical feature modules use next/dynamic with ssr: false
• Initial JS bundle < 200KB (gzipped) for landing page
• Route-based code splitting for all /app routes
• Three.js, TensorFlow.js, Pyodide loaded only when needed
• Bundle analyzer shows no duplicate dependencies
• Lighthouse performance score ≥ 80 on mobile

[Agbasimere]

Hi there, I'll like to work on this issue.

[grantfox-oss]

🦊 GrantFox — @Agbasimere 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 #73)
2. Your PR will be reviewed by the Epondia 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!

@Agbasimere's PR #88 was approved and merged by @jobbykings.

🏆 @Agbasimere: You earned 40 FoxPoints for this contribution! Your current tier: Builder (1,068 total points). Track your full progress on GrantFox.

👏 Great work, @Agbasimere! Keep contributing to Epondia.