Implement Route Based Code Splitting

[siddhant1]

I think we should implement route based code splitting ,this will be easy to implement but will serve great improvements for the performance of the app.

Links :- https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
https://reactjs.org/docs/code-splitting.html
https://github.com/jamiebuilds/react-loadable
https://medium.com/airbnb-engineering/server-rendering-code-splitting-and-lazy-loading-with-react-router-v4-bfe596a6af70

[siddhant1]

I can work on it while working on #857

[catarak]

hopefully this would have a meaningful impact on the site loading—given that the web editor is mostly the code editor/preview window, i wonder if this would make a significant impact. it's worth investigating!

[siddhant1]

If the user is only there for the editor , we can save some valuable loading times by not downloading login page and examples page JavaScript

[catarak]

yeah, i think it is worth investigating! it's hard to know whether or not this improvement would be small or significant. i wonder if there's a way to do some incremental tests so all of this work doesn't happen for a small improvement.

[catarak]

Using React Router (likely depends on #857): https://reactrouter.com/web/guides/code-splitting

[vivekbopaliya]

@catarak @kjhollen are we still up for this? as new react-router-dom v6 has been out lately!

[SushantBansal-tech]

@catarak Can you please assign this to me.