[Feature]: Reduce the large frontend bundle size on 3D-heavy pages

[nikkogibler]

Area

Frontend UX

What problem are you trying to solve?

The current production frontend bundle is large, and the build already warns about oversized chunks. This likely comes from a mix of Three.js-related dependencies and page-level code loading too early.

Proposed solution

Profile the current production bundle and reduce the initial payload by deferring or splitting the heaviest route-level and 3D-related code.

Acceptance criteria:

• identify the biggest contributors to the large bundle
• introduce at least one meaningful improvement such as route-level lazy loading, deferred loading, or chunking changes
• production build still succeeds
• note the before/after bundle impact in the PR description

Alternatives considered

• Accept the current bundle size and leave optimization for later. This keeps work low now but hurts performance and makes the repo less impressive to first-time visitors.
• Rewrite visual features to remove most 3D dependencies. That may reduce weight, but it changes product feel and is too large for this issue.

Scope and impact

• reduce initial JavaScript payload
• avoid loading heavy visual dependencies on routes that do not need them immediately
• keep the cinematic feel while improving load performance

Relevant code:

• artifacts/marsfounder/src/pages/home.tsx
• artifacts/marsfounder/src/pages/configure.tsx
• artifacts/marsfounder/src/main.tsx
• artifacts/marsfounder/vite.config.ts

Notes:

Do not optimize blindly. Start from the current build output and target the heaviest contributors.

Pre-flight checks

• I searched existing issues and did not find a duplicate.
• I explained the problem, not just the desired feature.