Enable code splitting at the route level

[seriouslysean]

Feature Summary

Async load top level view components to take advantage of code splitting

Detailed Description

Convert routes to something like this:

const routes = [
    {
        path: '/path',
        component: () => import('/path/to/component')
    }
]

[seriouslysean]

See https://github.com/cuttle-cards/cuttle/blob/main/src/router.js#L43

[Nishith-Savla]

Hey @seriouslysean, I would like to work on this. Can you please assign it to me?

[seriouslysean]

@Nishith-Savla when working on this, 2 things to look out for:

• code splits properly and the bundle decreases in size for each route.
• The user experience is not impacted by longer load times.

I expect time to first byte will improve, but I don’t want that to be at the cost of navigation speeds when browsing from page to page.

Keeping in mind the critical path is Home/GameList -> Lobby -> Game.

[Nishith-Savla]

Yes will surely keep in check. Also, how do I check the bundle size for each route? Through the browser network captures?

[seriouslysean]

Browser capture is totally fine. Some sort of bundle analyzer or do a production build and check files on the hard drive.

[Nishith-Savla]

Ok will try.

[ar1701]

Hi @seriouslysean , I would to contribute into this. Can you please assign this to me ?

[HarshXAI]

HI @seriouslysean , is this issue resolved because in https://github.com/cuttle-cards/cuttle/blob/main/src/router.js#L43 I find most of the routes have been configured as you wished , so if this issue is still open , I would like to contribute to it , this is my first time contributing to open source , I would like to start my journey , if you can help me , would be grateful.

[ar1701]

I am trying to create a pr, but this is coming At least 1 approving review is required by reviewers with write access. @seriouslysean can u help me with this ?

[Haviles04]

I am trying to create a pr, but this is coming At least 1 approving review is required by reviewers with write access. @seriouslysean can u help me with this ?

Your PR is created, it is waiting for review, and approval from the Core Team before it can be merged into the codebase 👍