UI: Code Split larger and/or less-used paths for smaller initial bundle

[agilgur5]

Summary

Instead of having all the UI pages in one bundle, we can code split out certain pages that are either quite large (e.g. have a lot of code or deps) or less-used.

Use Cases

• To load the UI faster by loading the most used pages first and then asynchronously loading other pages when needed. For a faster TTFP (time to first paint), TTI (time to interactive), etc. Use less networking on average as well.
• For slower devices such as those described in #11970

Implementation Details

Nowadays, React supports loading components async with the built-in lazy function, which you normally pass a dynamic import into. Webpack will automatically code-split dynamic imports.

Two components that I think might be ripe for code-splitting are:

• the Swagger API docs (see also #12058 and #11970) that are used pretty infrequently, contain a whole swagger-ui in it and the Swagger file itself
• perhaps the code editing features that rely on monaco-editor

Also, some pages could be good to code-split by default

• the Argo Events pages of the UI could be useful as well as not everyone uses Workflows and Events together
• the Reports page, which I literally had never used nor known that it even existed until #11794

Checklist

EDIT: This was added after a lot of analysis and work below to keep track of things, was not part of the original issue.

In order of most impact to the bundle and most splittable (some are used in many places and so are harder to split):

1. [ ] code split deps

   1. [x] monaco-editor (et al): #12150
   2. [x] moment-timezone: #12097
   3. [x] swagger-ui-react (et al): #12061
   4. [ ] xterm: #12158
   5. [ ] moment: #12611
   6. [x] chart.js: #12061
   7. [x] react-markdown (+ remark-gfm + etc): #12580
   8. [ ] react-datepicker (+ date-fns + react-popper + etc):
   9. [ ] cron-parser (+ luxon):

2. [ ] code split pages

   1. [x] ApiDocs: #12061
   2. [x] Reports: #12061
   3. [ ] event-sources:
   4. [ ] sensors:
   5. [ ] event-flow:
   6. [ ] cron-workflows:
   7. [ ] workflow-templates:
   8. [ ] cluster-workflow-templates:

Trade-offs

Note that code-splitting is not without its trade-offs as more bundles can have downsides. In particular if those bundles are very small. In this case I think the pros outweigh the cons for certain pages (Swagger UI almost certainly), but may need some more testing for other pages.

---

Message from the maintainers:

Love this enhancement proposal? Give it a 👍. We prioritise the proposals with the most 👍.