More aggressive bundle splitting

[david-crespo]

The main bundle is 300k gzipped and it's quite a lot of JS to parse and execute up front when maybe 20% of is needed for a given page. React Router makes it extremely easy to split on a per-page basis. Remix SPA mode seems to split every page by default. We probably don't have to go that far, but there's not that much downside to it. Converting to the lazy format will get us very close to the file structure we'd need for Remix SPA, so we can consider this an investment in that transition as well.

https://reactrouter.com/en/main/route/lazy

[david-crespo]

Something worth thinking about. Having a bunch of individual bundles makes the following situation more likely: someone has the console open, they go take a nap, the rack gets updated, they come back, and when they hit a new page, the target page's JS won't exist anymore on the rack because the bundle filenames have changed. In that case we should either refresh the page or pop up an error modal saying sorry, the server version changed under you, click here to refresh (possibly useful in other scenarios too). I'm honestly not sure what we do now if a dynamic import fails, but it's less likely to happen there are only 3 bundles — main, xterm, and recharts.

---

Update: did some research on what happens if a dynamic import fails. If <Suspense> gets an error, it will send the error up the tree to the nearest error boundary. That means the user would see this, which does say more or less what I'd want to say anyway: something went wrong, try again. Try again is kind of vague, but that might be a good thing. In this case a more specific recommendation than "try again" would be "refresh".

Before I saw that the generic error page is basically fine for this purpose, I was curious about what kind of error is thrown, so we could detect it here and display something special:

console/app/components/ErrorBoundary.tsx

Lines 19 to 32 in 555c2f6

	function ErrorFallback({ error }: Props) {
	if ('statusCode' in error && error.statusCode === 404) {
	return <NotFound />
	}
	return (
	<ErrorPage>
	<h1 className="text-sans-2xl">Something went wrong</h1>
	<p className="text-tertiary">
	Please try again. If the problem persists, contact your administrator.
	</p>
	</ErrorPage>
	)
	}

I didn't recreate the scenario exactly (which would probably require me to temporarily delete a single JS asset on dogfood), but it probably looks like this:

I checked in both FF and Chrome because I correctly figured it would be slightly different in each one and therefore not 100% obvious to detect. It would be interesting to see if React Router or Remix SPA throw special errors on dynamic import failure that could be more reliably detected in an error boundary. I wasn't able to tell from the source as it's pretty complicated, but it did look very plausible that RR is throwing up a processed version of the error rather than the raw error thrown by the import().

[david-crespo]

Note here on why putting all system pages into one big lazy bundle doesn't help.

#2091 (comment)

[david-crespo]

However, splitting out a few pages that share some big dependency does work, and is much easier! Aha! This is a 15 line change that cuts into the main bundle by more than 10%.

diff turning metrics pages into a lazy import

diff --git a/app/pages/SiloUtilizationPage.tsx b/app/pages/SiloUtilizationPage.tsx
index 8b3d8fb7..1c79de5b 100644
--- a/app/pages/SiloUtilizationPage.tsx
+++ b/app/pages/SiloUtilizationPage.tsx
@@ -24,7 +24,7 @@ import { bytesToGiB, bytesToTiB } from '~/util/units'
 
 const toListboxItem = (x: { name: string; id: string }) => ({ label: x.name, value: x.id })
 
-SiloUtilizationPage.loader = async () => {
+export async function loader() {
   await Promise.all([
     apiQueryClient.prefetchQuery('projectList', {}),
     apiQueryClient.prefetchQuery('utilizationView', {}),
@@ -32,7 +32,8 @@ SiloUtilizationPage.loader = async () => {
   return null
 }
 
-export function SiloUtilizationPage() {
+Component.displayName = 'SiloUtilizationPage'
+export function Component() {
   const { me } = useCurrentUser()
 
   const siloId = me.siloId
diff --git a/app/pages/project/instances/instance/tabs/MetricsTab.tsx b/app/pages/project/instances/instance/tabs/MetricsTab.tsx
index a80f29a6..74b0dea0 100644
--- a/app/pages/project/instances/instance/tabs/MetricsTab.tsx
+++ b/app/pages/project/instances/instance/tabs/MetricsTab.tsx
@@ -150,7 +150,7 @@ function DiskMetric({
 // Considering the data is going to be swapped out as soon as they change the
 // date range, I'm inclined to punt.
 
-MetricsTab.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { project, instance } = getInstanceSelector(params)
   await apiQueryClient.prefetchQuery('instanceDiskList', {
     path: { instance },
@@ -159,7 +159,8 @@ MetricsTab.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
-export function MetricsTab() {
+Component.displayName = 'MetricsTab'
+export function Component() {
   const { project, instance } = useInstanceSelector()
   const { data } = usePrefetchedApiQuery('instanceDiskList', {
     path: { instance },
diff --git a/app/pages/system/UtilizationPage.tsx b/app/pages/system/UtilizationPage.tsx
index e353b02f..6a4b10a3 100644
--- a/app/pages/system/UtilizationPage.tsx
+++ b/app/pages/system/UtilizationPage.tsx
@@ -30,7 +30,7 @@ import { Tabs } from '~/ui/lib/Tabs'
 import { round } from '~/util/math'
 import { bytesToGiB, bytesToTiB } from '~/util/units'
 
-SystemUtilizationPage.loader = async () => {
+export async function loader() {
   await Promise.all([
     apiQueryClient.prefetchQuery('siloList', {}),
     apiQueryClient.prefetchQuery('siloUtilizationList', {}),
@@ -38,7 +38,8 @@ SystemUtilizationPage.loader = async () => {
   return null
 }
 
-export function SystemUtilizationPage() {
+Component.displayName = 'SystemUtilizationPage'
+export function Component() {
   const { data: siloUtilizationList } = usePrefetchedApiQuery('siloUtilizationList', {})
 
   const { totalAllocated, totalProvisioned } = totalUtilization(siloUtilizationList.items)
diff --git a/app/routes.tsx b/app/routes.tsx
index 16b6239e..cb8a0bd4 100644
--- a/app/routes.tsx
+++ b/app/routes.tsx
@@ -53,7 +53,6 @@ import { ImagesPage } from './pages/project/images/ImagesPage'
 import { InstancePage } from './pages/project/instances/instance/InstancePage'
 import { SerialConsolePage } from './pages/project/instances/instance/SerialConsolePage'
 import { ConnectTab } from './pages/project/instances/instance/tabs/ConnectTab'
-import { MetricsTab } from './pages/project/instances/instance/tabs/MetricsTab'
 import { NetworkingTab } from './pages/project/instances/instance/tabs/NetworkingTab'
 import { StorageTab } from './pages/project/instances/instance/tabs/StorageTab'
 import { InstancesPage } from './pages/project/instances/InstancesPage'
@@ -64,7 +63,6 @@ import { ProjectsPage } from './pages/ProjectsPage'
 import { ProfilePage } from './pages/settings/ProfilePage'
 import { SSHKeysPage } from './pages/settings/SSHKeysPage'
 import { SiloAccessPage } from './pages/SiloAccessPage'
-import { SiloUtilizationPage } from './pages/SiloUtilizationPage'
 import { DisksTab } from './pages/system/inventory/DisksTab'
 import { InventoryPage } from './pages/system/inventory/InventoryPage'
 import { SledInstancesTab } from './pages/system/inventory/sled/SledInstancesTab'
@@ -75,7 +73,6 @@ import { IpPoolsPage } from './pages/system/networking/IpPoolsPage'
 import { SiloImagesPage } from './pages/system/SiloImagesPage'
 import { SiloPage } from './pages/system/silos/SiloPage'
 import { SilosPage } from './pages/system/silos/SilosPage'
-import { SystemUtilizationPage } from './pages/system/UtilizationPage'
 import { pb } from './util/path-builder'
 
 const projectCrumb: CrumbFunc = (m) => m.params.project!
@@ -144,8 +141,7 @@ export const routes = createRoutesFromElements(
         <Route path="issues" element={null} />
         <Route
           path="utilization"
-          element={<SystemUtilizationPage />}
-          loader={SystemUtilizationPage.loader}
+          lazy={() => import('./pages/system/UtilizationPage')}
           handle={{ crumb: 'Utilization' }}
         />
         <Route
@@ -227,8 +223,7 @@ export const routes = createRoutesFromElements(
         </Route>
         <Route
           path="utilization"
-          element={<SiloUtilizationPage />}
-          loader={SiloUtilizationPage.loader}
+          lazy={() => import('./pages/SiloUtilizationPage')}
           handle={{ crumb: 'Utilization' }}
         />
 
@@ -314,8 +309,7 @@ export const routes = createRoutesFromElements(
               />
               <Route
                 path="metrics"
-                element={<MetricsTab />}
-                loader={MetricsTab.loader}
+                lazy={() => import('./pages/project/instances/instance/tabs/MetricsTab')}
                 handle={{ crumb: 'metrics' }}
               />
               <Route

dist/assets/SiloUtilizationPage-BLCwrk8N.js                 1.83 kB │ gzip:   0.96 kB │ map:     6.41 kB
dist/assets/MetricsTab-HlDBK5Uo.js                          3.28 kB │ gzip:   1.54 kB │ map:    11.95 kB
dist/assets/UtilizationPage-BPyAve05.js                     5.00 kB │ gzip:   1.71 kB │ map:    16.80 kB
dist/assets/SystemMetric-D8aRr9WB.js                        7.55 kB │ gzip:   2.41 kB │ map:    25.22 kB
dist/assets/DateTimeRangePicker-D5Rnmcdd.js               110.61 kB │ gzip:  36.84 kB │ map:   542.80 kB
dist/assets/Terminal-Bw0hdFe5.js                          287.56 kB │ gzip:  72.16 kB │ map:   590.21 kB
dist/assets/TimeSeriesChart-DZ4Bxvvl.js                   384.84 kB │ gzip: 107.42 kB │ map: 1,759.67 kB
dist/assets/app-BxOOCAau.js                               953.54 kB │ gzip: 297.92 kB │ map: 4,588.89 kB

[david-crespo]

I think it’s time to do a bit of this. I’ll set an arbitrary target and say let’s cut the amount of JS that runs immediately on the homepage by at least 50%.