Split the bundle so heavy visualisation and editor dependencies load on demand

[priscaenoch]

Problem

The app depends on several very large libraries: monaco-editor, 3d-force-graph, cytoscape, react-flow-renderer, @webcontainer/api, and jszip. vite.config.ts sets only build: { target: "esnext" } with no chunking strategy (build.rollupOptions.output.manualChunks). Routes are already lazily imported in src/App.tsx, but these libraries are still liable to be pulled into large shared chunks, so users landing on a simple page (for example a contract or event view) may download the 3D graph and editor code they never use.

What needs to be done

• Measure the current build output (npm run build) and record the chunk sizes in the issue/PR.
• Add a manualChunks strategy separating: monaco-editor, the graph libraries (3d-force-graph, cytoscape, react-flow-renderer), and jszip/@webcontainer/api.
• Ensure these libraries are only imported inside the lazily loaded routes that need them (no eager import from shared modules).
• Re-measure and record the improvement.

Files

• vite.config.ts
• pages/components importing the heavy libraries

Acceptance deliverables

• Heavy libraries are emitted as separate chunks and are not loaded on routes that do not use them.
• Documented before/after chunk sizes showing an improvement in the initial payload.

Tests to pass

• npm run build succeeds and the expected separate chunks are present in dist.
• Existing tests continue to pass.

[OpensrcLord]

Hello @maintainer, I’d like to work on this issue. I have experience handling similar tasks and can start immediately. And I will deliver at the shortest possible time.

[Hexstar-labs]

I have critically gone through the issue and identified the implementation approach. I'd be happy to work on this and submit a high-quality PR.

[grantfox-oss]

🦊 GrantFox — @Hexstar-labs has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #22)
2. Your PR will be reviewed by the octraban 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 | FWC26 campaign!

@Hexstar-labs's PR #30 was approved and merged by @priscaenoch.

🏆 @Hexstar-labs: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (239 total points). Track your full progress on GrantFox.

👏 Great work, @Hexstar-labs! Keep contributing to octraban.