Task: Implement lazy loading #2229
Conversation
Onokaev
requested review from
thewahome,
ElinorW,
adhiambovivian,
millicentachieng and
ddyett
as code owners
There was a problem hiding this comment.
Let's have the PR body explain Please also mention in the PR description the gains expected.
Are we aiming to reduce bundle size? How much does the work in this PR save us?
IMHO it could be that the network calls we are making on the first load are expensive. And that it could be unrelated to lazy loading the different tabs.
We can also analyse whether GE with the Dev portal chrome around it gives us the same load time as GE without the portal chrome. Then see whether it's the extra html added during production that affects the initial load time
|
SonarCloud Quality Gate failed. |
Onokaev
added
the
status:needs-discussion
There was a problem hiding this comment.
We are going to add a lot of SuspenseLoaders everywhere.
It's probably possible for us to have a component registry where we register the suspended components and import them in the required files without adding the suspense and error boundaries.
If successful, it could mean we would be changing only where the components are imported from and not how they are imported.
e.g.
import { Permission } from 'component-registry'; instead of const Permission = lazy(() => import('../../query-runner/request/permissions'))
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-2229.centralus.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-2229.centralus.azurestaticapps.net |
1 similar comment
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-2229.centralus.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-2229.centralus.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-2229.centralus.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-2229.centralus.azurestaticapps.net |
Co-authored-by: Charles Wahome <[email protected]>
Co-authored-by: Charles Wahome <[email protected]>
Co-authored-by: Charles Wahome <[email protected]>
Co-authored-by: Charles Wahome <[email protected]>
…osoftgraph/microsoft-graph-explorer-v4 into task/implement-lazy-loading
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-2229.centralus.azurestaticapps.net |
Nice spotting @thewahome |
|
@gavinbarron I'll add it as a recommended extension |
|
Kudos, SonarCloud Quality Gate passed!
|
Overview
Implements #2228
Demo
Optional. Screenshots,
curlexamples, etc.Chunks before lazy loading
Chunks after lazy loading
Notes
Currently, Graph Explorer is loaded in a single bundle. With the app growing, this bundle is also increasing in size. The current bundle has a size a little over 1MB. This has an impact on the app load time as the whole bundle has to be loaded first for the app to become usable
Lazy loading splits the original bundle into smaller chunks so that what is needed on first-load is what is loaded initially. The lazily loaded components will be in their own chunks and will be loaded on demand
Testing Instructions
Load the app on your browser
Click 'Request headers' tab
Notice that it is loaded on demand
Click on other components (Modify Permissions, Access token, Response headers, Resources etc.)