feat: Lazy loading and code splitting #1802
Conversation
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #1802 +/- ##
==========================================
- Coverage 46.06% 45.98% -0.09%
==========================================
Files 627 631 +4
Lines 37792 37832 +40
Branches 9522 9529 +7
==========================================
- Hits 17410 17397 -13
- Misses 20328 20381 +53
Partials 54 54
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
|
Good work.
An app mode dashboard can disable the console, and is actually probably the expected pattern. Iris grid sidebar does use Monaco for custom columns, and that would benefit from lazy loading in monaco. |
That's not true - in App mode, you can specify a default layout without a console at all. We would need console to lazy load it as well too though, and would need to initialize Monaco correctly still (AppRoot calls MonacoUtils.init right now) |
|
Seems to have broken the Style guide? |
|
Added @bmingles to confirm he's ok with the CSS fix for the chunks loading out of order in production |
|
Also, I didn't think about app mode not necessarily requiring a monaco load. That said, I won't worry about splitting out monaco in this PR as I mostly wanted mathjax and plotly split |
packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css
Outdated
Show resolved
Hide resolved
|
Added an e2e test which works because of the manual chunks for the large packages. Tested the e2e test locally by changing the |
| /** | ||
| * Intentionally using the classname twice so we have higher specificity than spectrum's definitions | ||
| */ |
There was a problem hiding this comment.
Why are we doing this and why is it a part of this change? Should add to the comment why we need to do this (chunks loading out of order).
Though that being said - chunks loading out of order implies there's something off with the packaging. Why is this happening now?
There was a problem hiding this comment.
I'll update the comment.
I didn't dig too far into why the chunks were out of order (we don't directly import spectrum's css nor can we because it's spread across every component). We could also have an import order wrong somewhere in our code. Or because of lazy loading the chunks are getting split a little differently. We still put node_modules into 1 of 4 chunks (monaco, plotly, mathjax, vendor). Everything else seems to chunk based on the dynamic imports.
Either way, just increasing the specificity is safer in the long run I think (although it did fail e2e tests because of the import order)
This adds lazy loading for
chartandiris-gridand enables it forMarkdownComponentas well.Replaced the exports for
ChartandIrisGridwith lazy loading wrappers. This should mean anywhere else we use the components in the app should be automatically lazy loaded.iris-griddoesn't seem to really lazy load anything. Might be that most/all of its dependencies are already used in other spots in the app, so they all load anyway.chartI confirmed lazy loads by watching the network tab on page load with no charts open. When I open a chart or view the memory usage graph, the network tab shows 2 chunks loading in including plotly.MarkdownComponentI confirmed the same was aschartbut with opening a markdown panel. There is a big chunk lazy loaded which includes mathjax.We could remove the
iris-gridstuff for now if we want, or keep it and maybe future changes will enable splitting. Outside of monaco I don't think it's a very heavy import