Skip to content

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

@Suvam-paul145

Description

@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

Code of Conduct

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions