Lazy load components #3879

sorin-davidoi · 2017-06-20T23:44:38Z

Roadmap:

Bundles: https://gist.github.com/sorin-davidoi/07def6eb30df015fbfc8ced9fa36babd

sorin-davidoi · 2017-06-21T19:40:11Z

This reduces the size of application.js by 27% (673kB -> 485kb), while creating ~25 extra bundles. The progress bar is being used to show the download progress of each bundle. While the bundle is fetched, it displays a loading state in accordance with the content. If the fetch fails, an error component is shown, which provides a "refresh" button, allowing the user to replay the download.

nolanlawson · 2017-06-21T21:21:31Z

Nice work! Based on the Webpack Bundle Analyzer output, though, it does appear that there are lots of common modules that are repeated throughout the async chunks – status.js, video_player.js, react-simple-dropdown, react-router-scroll, etc. I suppose WebpackCommonsChunkPlugin doesn't include those if they're included in async chunks? It seems useful to put those in common.js, given that there will probably be lots of users who load at least two of home/localTL/federatedTL/accountTL/hashtagTL/etc.

nightpool · 2017-06-22T14:33:03Z

I'm not sure I see the practical benefit of this—won't it just increase latency on poor connections due to the extra round trip requests?

Is there a way to measure whether the decreased bundle size will actually reflect real world usage?

sorin-davidoi · 2017-06-22T14:34:52Z

It should decrease time to first paint (less JavaScript to parse, which is the main bottleneck on mobile), as well as memory usage. Don't think we are currently measuring those?

sorin-davidoi · 2017-06-22T14:37:55Z

As a side note, it would be nice to set up Lighthouse integration, to measure these metrics for each PR.

sorin-davidoi · 2017-06-22T15:27:42Z

Unscientific findings (running Lighthouse against current master and this branch):

Performance score: +3 (51 -> 54)
Render blocking scripts: -200ms (2070ms -> 1820ms)
First paint: -140ms (7060ms -> 6950ms)
First interactive: -600ms (7570ms -> 6950ms)

I would prefer to take the average of a few tests but I don't have the time to do it (is there a tool for it?).

nolanlawson · 2017-06-22T16:25:50Z

won't it just increase latency on poor connections due to the extra round trip requests?

That can be fixed by adding <link rel=preload>s for each of the chunks that we expect are very likely to get loaded by the user. I think this would be a smart addition; @sorin-davidoi you can add it to application.html.haml like so:

%link{:rel => "preload", :as => "script", :src => (asset_pack_path 'application.js')}/

Also for your Lighthouse score, what page did you test against? There are a few I think we want to prioritize:

/web/getting-started – main home
/web/timelines/home – mobile PWA home (defined in manifest.json)

I also imagine there are people who bookmark local/federated/home timelines, so those would be worthwhile to preload as well.

Overall, I believe it is worthwhile to only load those routes that the user explicitly requested, since it limits overhead of JS parse/exec (and also memory). But avoiding extra network roundtrips is important, and also I'd like to see some deduplication of the shared modules across async chunks.

sorin-davidoi · 2017-06-22T16:27:52Z

I tested the local timeline (mobile UI). <link rel=preload> sounds nice, will try to add them! 👍

sorin-davidoi · 2017-06-22T16:52:45Z

I think we could also lazy-load some reducers (see https://stackoverflow.com/questions/32968016/how-to-dynamically-load-reducers-for-code-splitting-in-a-redux-application), ~~but that is a can of worms I don't want to open for now.~~ Proceeds to open can of worms.

beatrix-bitrot · 2017-06-22T19:04:34Z

Is this ready for review?

sorin-davidoi · 2017-06-22T19:05:28Z

Just a few final touches to do. Found a crash as well.

sorin-davidoi · 2017-06-22T22:11:20Z

I'd say it is now ready for review. Could lazy-load more reducers I think but I would rather do it in another PR. Would also be nice to lazy-load the Emoji picker using the same idioms used here, but that can wait as well.

beatrix-bitrot · 2017-06-23T05:46:32Z

nice, because it's a big PR and not my area of expertise I will test this branch on glitch.social to make my review

nolanlawson

Codewise this looks great to me; I just have a few small suggestions. This is also deployed at malfunctioniong.technology (with service worker as well) for those who want to take a look.

nolanlawson · 2017-06-23T14:43:41Z

app/javascript/mastodon/features/ui/index.js

+
+// Dummy import, to make sure that <Status /> ends up in the application bundle.
+// Without this it ends up in ~8 very commonly used bundles.
+import '../../components/status';


nolanlawson · 2017-06-23T14:47:12Z

app/views/layouts/application.html.haml

+
+    = javascript_pack_tag 'features/community_timeline', integrity: true, crossorigin: 'anonymous', rel: 'preload'
+
+    = javascript_pack_tag 'features/public_timeline', integrity: true, crossorigin: 'anonymous', rel: 'preload'


These should have as="script" as well; it's explained what the browser does with this extra information here.

nolanlawson · 2017-06-23T14:50:32Z

In terms of bundle sizes this also looks great. I rebuilt and put a Webpack Bundle Analyzer view here for those who want to see. (Protip: make a Gist with an index.html and bl.ocks.org can host it for you. 😃)

Gargron · 2017-06-25T17:59:59Z

@nolanlawson Waiting on you to check the changes.

nolanlawson

This looks great to me, and is live on malfunctioning.technology to test. (You may need to hard-refresh due to ServiceWorker.)

We may want to warn admins when we ship this that they will probably want to enable HTTP/2 since we are now preloading 13 JS files, which will be slow on HTTP/1 due to the 6-connections-per-origin limit. We may also want to tweak the preloading to limit it to only those components that are guaranteed to be loaded (e.g. "getting started" will only be loaded for first-time users; maybe we can detect that somehow with cookies?).

But those are minor concerns; overall this looks awesome to me and I'm 👍 to merge. I especially love the new async-components.js so we can keep all of those components in one place. Great work!

nolanlawson · 2017-06-29T21:08:48Z

BTW http2 is recommended in the tootsuite/documentation nginx config so hopefully most admins already have it.

unarist · 2017-06-30T14:17:30Z

Component which is loaded before also seem to be lazy loaded.

I think it can be avoided by caching result of import(). (sample: unarist@4cf1fde)

Pros: avoid flashing of loading view, slightly reduces total time
Cons: single script execution will be longer, i.e. blocks browser longer

How about this?

Gargron · 2017-07-08T02:50:31Z

@sorin-davidoi Please guide me through where the "loading" and "error" views are defined and how to get to see them without a slow connection so I can make sure I like how they look visually.

sorin-davidoi · 2017-07-08T09:13:14Z

@Gargron Open the Network tab in the Chrome development tools and tick "Disable cache".

For columns:

Loading state - Load a timeline, throttle the connection to GPRS, click on a toot.
Error state - Load a timeline, tick the "Offline" checkbox, click on a toot. After the error state is shown you can uncheck "Offline" and click retry, the normal page should appear.

For modals:

Loading state - throttle the connection to GPRS and open a media modal
Error state - tick "Offline" and open a media modal - same behavior with retry

* feat: Lazy-load routes * feat: Lazy-load modals * feat: Lazy-load columns * refactor: Simplify Bundle API * feat: Optimize bundles * feat: Prevent flashing the waiting state * feat: Preload commonly used bundles * feat: Lazy load Compose reducers * feat: Lazy load Notifications reducer * refactor: Move all dynamic imports into one file * fix: Minor bugs * fix: Manually hydrate the lazy-loaded reducers * refactor: Move all dynamic imports to async-components * fix: Loading modal style * refactor: Avoid converting the raw state for each lazy hydration * refactor: Remove unused component * refactor: Maintain modal name * fix: Add as=script to preload link * chore: Fix lint error * fix(components/bundle): Check if timestamp is set when computing elapsed * fix: Load compose reducers for the onboarding modal

* Add Japanese translations for #3879 * Add Japanese translations for #4033 * Add Japanese translations for #4136

* feat: Lazy-load routes * feat: Lazy-load modals * feat: Lazy-load columns * refactor: Simplify Bundle API * feat: Optimize bundles * feat: Prevent flashing the waiting state * feat: Preload commonly used bundles * feat: Lazy load Compose reducers * feat: Lazy load Notifications reducer * refactor: Move all dynamic imports into one file * fix: Minor bugs * fix: Manually hydrate the lazy-loaded reducers * refactor: Move all dynamic imports to async-components * fix: Loading modal style * refactor: Avoid converting the raw state for each lazy hydration * refactor: Remove unused component * refactor: Maintain modal name * fix: Add as=script to preload link * chore: Fix lint error * fix(components/bundle): Check if timestamp is set when computing elapsed * fix: Load compose reducers for the onboarding modal

sorin-davidoi changed the title ~~Lazy load components~~ [WIP] Lazy load components Jun 20, 2017

ykzts added performance Runtime performance ui Front-end, design work in progress Not to be merged, currently being worked on labels Jun 21, 2017

sorin-davidoi mentioned this pull request Jun 21, 2017

Lazy load routes and some components #3381

Closed

sorin-davidoi changed the title ~~[WIP] Lazy load components~~ Lazy load components Jun 21, 2017

sorin-davidoi mentioned this pull request Jun 23, 2017

Experimenting with Preact #3908

Closed

nolanlawson suggested changes Jun 23, 2017

View reviewed changes

akihikodaki removed the work in progress Not to be merged, currently being worked on label Jun 27, 2017

nolanlawson approved these changes Jun 27, 2017

View reviewed changes

nolanlawson mentioned this pull request Jun 29, 2017

Avoid using getBoundingClientRect to calculate height #4001

Merged

sorin-davidoi mentioned this pull request Jun 29, 2017

Delay unmount of some components #3995

Closed

sorin-davidoi mentioned this pull request Jun 30, 2017

Defer status rendering #4018

Closed

sorin-davidoi added 16 commits July 7, 2017 11:31

feat: Prevent flashing the waiting state

3766689

feat: Preload commonly used bundles

4bdc2cf

feat: Lazy load Compose reducers

37023a4

feat: Lazy load Notifications reducer

d331d66

refactor: Move all dynamic imports into one file

089057b

fix: Minor bugs

f2843b4

fix: Manually hydrate the lazy-loaded reducers

c5e3c94

refactor: Move all dynamic imports to async-components

0104b8c

fix: Loading modal style

9a8099c

refactor: Avoid converting the raw state for each lazy hydration

4817470

refactor: Remove unused component

3fb6184

refactor: Maintain modal name

6d48683

fix: Add as=script to preload link

4fb9237

chore: Fix lint error

7ec246b

fix(components/bundle): Check if timestamp is set when computing elapsed

ac9d39a

fix: Load compose reducers for the onboarding modal

ec658dc

sorin-davidoi mentioned this pull request Jul 7, 2017

Swipeable views #4105

Merged

2 tasks

Gargron merged commit 348d6f5 into mastodon:master Jul 7, 2017

unarist mentioned this pull request Jul 8, 2017

Fix first loading of notifications when the column is pinned (regression from #3879) #4114

Merged

sorin-davidoi deleted the lazy-loading branch July 8, 2017 09:13

This was referenced Jul 10, 2017

Fix regular expression for RFC 5646 (regression from #3604) #4133

Merged

Add Japanese translations #4140

Merged

Gargron pushed a commit that referenced this pull request Jul 10, 2017

Add Japanese translations (#4140)

31490e0

* Add Japanese translations for #3879 * Add Japanese translations for #4033 * Add Japanese translations for #4136

unarist mentioned this pull request Jul 12, 2017

Rerender modal on property changes #4175

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lazy load components #3879

Lazy load components #3879

sorin-davidoi commented Jun 20, 2017 •

edited

Loading

sorin-davidoi commented Jun 21, 2017

nolanlawson commented Jun 21, 2017 •

edited

Loading

nightpool commented Jun 22, 2017 •

edited

Loading

sorin-davidoi commented Jun 22, 2017

sorin-davidoi commented Jun 22, 2017

sorin-davidoi commented Jun 22, 2017

nolanlawson commented Jun 22, 2017

sorin-davidoi commented Jun 22, 2017

sorin-davidoi commented Jun 22, 2017 •

edited

Loading

beatrix-bitrot commented Jun 22, 2017

sorin-davidoi commented Jun 22, 2017 •

edited

Loading

sorin-davidoi commented Jun 22, 2017 •

edited

Loading

beatrix-bitrot commented Jun 23, 2017

nolanlawson left a comment

nolanlawson Jun 23, 2017

nolanlawson Jun 23, 2017

nolanlawson commented Jun 23, 2017

Gargron commented Jun 25, 2017

nolanlawson left a comment

nolanlawson commented Jun 29, 2017

unarist commented Jun 30, 2017

Gargron commented Jul 8, 2017

sorin-davidoi commented Jul 8, 2017


		= javascript_pack_tag 'features/community_timeline', integrity: true, crossorigin: 'anonymous', rel: 'preload'

		= javascript_pack_tag 'features/public_timeline', integrity: true, crossorigin: 'anonymous', rel: 'preload'

Lazy load components #3879

Lazy load components #3879

Conversation

sorin-davidoi commented Jun 20, 2017 • edited Loading

sorin-davidoi commented Jun 21, 2017

nolanlawson commented Jun 21, 2017 • edited Loading

nightpool commented Jun 22, 2017 • edited Loading

sorin-davidoi commented Jun 22, 2017

sorin-davidoi commented Jun 22, 2017

sorin-davidoi commented Jun 22, 2017

nolanlawson commented Jun 22, 2017

sorin-davidoi commented Jun 22, 2017

sorin-davidoi commented Jun 22, 2017 • edited Loading

beatrix-bitrot commented Jun 22, 2017

sorin-davidoi commented Jun 22, 2017 • edited Loading

sorin-davidoi commented Jun 22, 2017 • edited Loading

beatrix-bitrot commented Jun 23, 2017

nolanlawson left a comment

Choose a reason for hiding this comment

nolanlawson Jun 23, 2017

Choose a reason for hiding this comment

nolanlawson Jun 23, 2017

Choose a reason for hiding this comment

nolanlawson commented Jun 23, 2017

Gargron commented Jun 25, 2017

nolanlawson left a comment

Choose a reason for hiding this comment

nolanlawson commented Jun 29, 2017

unarist commented Jun 30, 2017

Gargron commented Jul 8, 2017

sorin-davidoi commented Jul 8, 2017

sorin-davidoi commented Jun 20, 2017 •

edited

Loading

nolanlawson commented Jun 21, 2017 •

edited

Loading

nightpool commented Jun 22, 2017 •

edited

Loading

sorin-davidoi commented Jun 22, 2017 •

edited

Loading

sorin-davidoi commented Jun 22, 2017 •

edited

Loading

sorin-davidoi commented Jun 22, 2017 •

edited

Loading