✨ [Feature request]: Implement Route-Based Code Splitting with React.lazy for All Plays

[Suvam-paul145]

Contributor Guidelines

• I have read the guidelines and discussion

Is your feature request related to a problem? Please describe.

• src/plays/index.js (auto-generated — imports all plays statically)
• src/common/playlists/PlayList.jsx (loads plays via import * as all_plays from 'plays')
• src/common/routing/RouteDefs.jsx

Description:
All 110+ plays are imported statically into a single bundle via import * as all_plays from 'plays' in PlayList.jsx. This means every play (including heavy dependencies like TensorFlow.js, Leaflet, CodeMirror, and P5.js) is loaded regardless of which play the user visits. The auto-generated src/plays/index.js re-exports every play component eagerly.

What needs to be done:

Describe the solution you'd like.

• Modify the play registration system to use React.lazy() and dynamic import() for each play
• Wrap play rendering in <Suspense> with appropriate loading fallbacks
• Update or replace the auto-generated src/plays/index.js to export lazy-loaded factories
• Verify that Webpack (via react-scripts) produces proper code-split chunks
• Add error boundaries per lazy-loaded play to handle chunk load failures

---

Describe alternatives you've considered.

No alternative solution i would like to prefer

Screenshot / Screenshare

No response

Additional context

Add apertre 3.0, hard label

Record

• I have checked the existing issues
• I have read the Contributing Guidelines
• I want to work on this issue
• I am a Hacktoberfest contributor

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Hey! contributor, thank you for opening an Issue 🎉.

@reactplay/maintainers will review your submission soon and give you helpful feedback. If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.

[priyankarpal]

Please assign me this issue and apertre 3.0, add hard label

Hi @Suvam-paul145 you don't need to mention difficulty labels we will add according to the issue difficulty.

Thanks.