flarum / flarum/issue-archive

JavaScript module lazy loading

Open
#265 3 comments 7 reactions 1 assignee Assigned to @KyrneDev View on GitHub
extension-breaking prio/high type/feature
Dominant language
No language data
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.