New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JavaScript module lazy loading #1643

Open
tobscure opened this Issue Nov 13, 2018 · 2 comments

Comments

Projects
None yet
2 participants
@tobscure
Member

tobscure commented Nov 13, 2018

Our JavaScript payload is quickly becoming quite large, especially when you have a bunch of extensions enabled. This will affect page load times and is something we should address. There are a few things we can do here:

  • The easiest place to start is to lazy-load text editor related code, like the TextFormatter preview, formatting buttons, punycode, and the emoji list. This code is large but is definitely not required for the page to be rendered. We can load this as a separate JS file asynchronously when the page loads, so it's ready to go when the composer is invoked (or if the composer is invoked before it has loaded, display a little loading spinner).

  • It may also be possible to split the app into a few chunks (global, discussion list, discussion, user page) and load global + whichever chunk you start on synchronously, and the rest asynchronously. However, this will require much more thought and planning, especially considering how extensions work to import, extend, and use certain modules when they boot.

  • (unrelated to this particular issue, but worth mentioning) Render a basic HTML structure on the server-side (for SEO content) which roughly matches that produced by the JS app. It makes sense to do this anyway, to give non-JS users the best reading experience possible and leverage the CSS that we have written already. In terms of speed, if we do this we don't have to hide the SEO HTML while waiting for the JS assets load. When the JS has loaded, it will re-render the interface, filling out all the bits that are missing in the SEO HTML.

@franzliedke

This comment has been minimized.

Member

franzliedke commented Nov 14, 2018

This probably depends on the Webpack transition being complete, right?

@franzliedke

This comment has been minimized.

Member

franzliedke commented Nov 14, 2018

And 👍 👏 🕺 for finding a way to render a non-interactive skeleton markup on the server.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment