perf: improve the initial page load speed (#9939)

determined-ai · Sep 19, 2024 · 5906001 · 5906001
1 parent eb1b0de
commit 5906001
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 27 deletions.
diff --git a/master/internal/core.go b/master/internal/core.go
@@ -1284,7 +1284,7 @@ func (m *Master) Run(ctx context.Context, gRPCLogInitDone chan struct{}) error {
 	m.echo.Use(middleware.Recover())
 
 	// Files that receive a unique hash when bundled and deployed can be cached forever
-	cacheFileLongTerm := regexp.MustCompile(`(-[0-9a-z]{1,}\.(js|css))$|(woff2|woff)$`)
+	cacheFileLongTerm := regexp.MustCompile(`(?i)(-[0-9a-z]{1,}\.(js|css))$|(woff2|woff)$`)
 
 	// Other static files should only be cached for a short period of time
 	cacheFileShortTerm := regexp.MustCompile(`.(antd.\S+(.css)|ico|png|jpe*g|gif|svg)$`)

diff --git a/webui/react/src/App.tsx b/webui/react/src/App.tsx
@@ -5,7 +5,7 @@ import { notification } from 'hew/Toast';
 import { ConfirmationProvider } from 'hew/useConfirm';
 import { Loadable } from 'hew/utils/loadable';
 import { useObservable } from 'micro-observables';
-import React, { useEffect, useLayoutEffect, useState } from 'react';
+import React, { Suspense, useEffect, useLayoutEffect, useState } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { HelmetProvider } from 'react-helmet-async';
@@ -182,7 +182,9 @@ const AppView: React.FC = () => {
                     />
                     <Omnibar />
                     <main>
-                      <Router routes={appRoutes} />
+                      <Suspense fallback={<Spinner center spinning />}>
+                        <Router routes={appRoutes} />
+                      </Suspense>
                     </main>
                   </Navigation>
                 </ConfirmationProvider>

diff --git a/webui/react/src/routes/index.tsx b/webui/react/src/routes/index.tsx
@@ -1,30 +1,32 @@
 import React from 'react';
 
-import Admin from 'pages/Admin';
-import Cluster from 'pages/Cluster';
-import ClusterLogs from 'pages/ClusterLogs';
-import Dashboard from 'pages/Dashboard';
-import DefaultRoute from 'pages/DefaultRoute';
-import Deprecated from 'pages/Deprecated';
-import ExperimentDetails from 'pages/ExperimentDetails';
-import InteractiveTask from 'pages/InteractiveTask';
-import ModelDetails from 'pages/ModelDetails';
-import ModelRegistryPage from 'pages/ModelRegistryPage';
-import ModelVersionDetails from 'pages/ModelVersionDetails';
-import ProjectDetails from 'pages/ProjectDetails';
-import Reload from 'pages/Reload';
-import ResourcepoolDetail from 'pages/ResourcePool/ResourcepoolDetail';
-import SearchDetails from 'pages/SearchDetails';
-import SignIn from 'pages/SignIn';
+const Admin = React.lazy(() => import('pages/Admin'));
+const Cluster = React.lazy(() => import('pages/Cluster'));
+const ClusterLogs = React.lazy(() => import('pages/ClusterLogs'));
+const Dashboard = React.lazy(() => import('pages/Dashboard'));
+const DefaultRoute = React.lazy(() => import('pages/DefaultRoute'));
+const Deprecated = React.lazy(() => import('pages/Deprecated'));
+const ExperimentDetails = React.lazy(() => import('pages/ExperimentDetails'));
+const InteractiveTask = React.lazy(() => import('pages/InteractiveTask'));
+const ModelDetails = React.lazy(() => import('pages/ModelDetails'));
+const ModelRegistryPage = React.lazy(() => import('pages/ModelRegistryPage'));
+const ModelVersionDetails = React.lazy(() => import('pages/ModelVersionDetails'));
+const ProjectDetails = React.lazy(() => import('pages/ProjectDetails'));
+const Reload = React.lazy(() => import('pages/Reload'));
+const ResourcepoolDetail = React.lazy(() => import('pages/ResourcePool/ResourcepoolDetail'));
+const SearchDetails = React.lazy(() => import('pages/SearchDetails'));
+import SignIn from 'pages/SignIn'; // no React.lazy to avoid e2e ci error
 import SignOut from 'pages/SignOut';
-import TaskListPage from 'pages/TaskListPage';
-import { TaskLogsWrapper } from 'pages/TaskLogs';
-import TemplatesPage from 'pages/Templates/TemplatesPage';
-import TrialDetails from 'pages/TrialDetails';
-import Wait from 'pages/Wait';
-import Webhooks from 'pages/WebhookList';
-import WorkspaceDetails from 'pages/WorkspaceDetails';
-import WorkspaceList from 'pages/WorkspaceList';
+const TaskListPage = React.lazy(() => import('pages/TaskListPage'));
+const TaskLogsWrapper = React.lazy(() =>
+  import('pages/TaskLogs').then((module) => ({ default: module.TaskLogsWrapper })),
+);
+const TemplatesPage = React.lazy(() => import('pages/Templates/TemplatesPage'));
+const TrialDetails = React.lazy(() => import('pages/TrialDetails'));
+const Wait = React.lazy(() => import('pages/Wait'));
+const Webhooks = React.lazy(() => import('pages/WebhookList'));
+const WorkspaceDetails = React.lazy(() => import('pages/WorkspaceDetails'));
+const WorkspaceList = React.lazy(() => import('pages/WorkspaceList'));
 import { RouteConfig } from 'types';
 
 import Routes from './routes';