1426591 - reduce open time via lazyload sidepanels with asyncComponent

Status: NEW

(DevTools :: Netmonitor, enhancement, P3)

Description

[[e-mail]]

In experiment I mocked sidepanels (TabboxPanel) and record reduce -5.84% complicated.netmonitor.open and -7.47% simple.netmonitor.open time

PR https://reviewboard.mozilla.org/r/194564/diff/22

https://treeherder.mozilla.org/perf.html#/comparesubtest?originalProject=mozilla-central&newProject=try&newRevision=acfe370eb4c745558aeeed160bdbbd6279421766&originalSignature=edaec66500db21d37602c99daa61ac983f21a6ac&newSignature=edaec66500db21d37602c99daa61ac983f21a6ac&filter=netmonitor&framework=1&selectedTimeRange=172800

We can lazyload TabboxPanel via asyncComponent to gain some open time
 https://github.com/ctrlplusb/react-async-component/blob/master/src/asyncComponent.js

Comment 1

[[e-mail]]

The open time now(~780ms) is in fine shape so we don't have to introduce asyncComponent to save some open time immediately.

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Fred Lin [:gasolin] from comment #0)

> We can lazyload TabboxPanel via asyncComponent to gain some open time
>  https://github.com/ctrlplusb/react-async-component/blob/master/src/
> asyncComponent.js
This sounds interesting.

Note that components like StatisticsPanel, NetworkDetailsPanel, etc. are now lazy loaded using `loader.lazyGetter()` now.

For example:
loader.lazyGetter(this, "NetworkDetailsPanel", function () {
  return createFactory(require("./NetworkDetailsPanel"));
});

See bug 1420289

What would be the advantage of using `react-async-component` over `loader.lazyGetter`?


Btw. react-async-component is based on react-async-bootstrapper, which could be used to improve architecture design of fetching async data for components.
https://github.com/ctrlplusb/react-async-bootstrapper
(it's out of scope of this bug obviously)

Honza