Code split <Workspace> and <Settings> routes

src-web/components/AppRouter.tsx

@@ -1,10 +1,12 @@
+import { lazy } from 'react';
 import { createBrowserRouter, Navigate, RouterProvider, useParams } from 'react-router-dom';
 import { routePaths, useAppRoutes } from '../hooks/useAppRoutes';
 import { DefaultLayout } from './DefaultLayout';
 import { RedirectToLatestWorkspace } from './RedirectToLatestWorkspace';
 import RouteError from './RouteError';
-import { Settings } from './Settings/Settings';
-import Workspace from './Workspace';
+
+const LazyWorkspace = lazy(() => import('./Workspace'));
+const LazySettings = lazy(() => import('./Settings/Settings'));
 
 const router = createBrowserRouter([
   {
@@ -24,14 +26,14 @@ const router = createBrowserRouter([
         path: routePaths.workspace({
           workspaceId: ':workspaceId',
         }),
-        element: <Workspace />,
+        element: <LazyWorkspace />,
       },
       {
         path: routePaths.request({
           workspaceId: ':workspaceId',
           requestId: ':requestId',
         }),
-        element: <Workspace />,
+        element: <LazyWorkspace />,
       },
       {
         path: '/workspaces/:workspaceId/environments/:environmentId/requests/:requestId',
@@ -41,7 +43,7 @@ const router = createBrowserRouter([
         path: routePaths.workspaceSettings({
           workspaceId: ':workspaceId',
         }),
-        element: <Settings />,
+        element: <LazySettings />,
       },
     ],
   },

src-web/components/Settings/Settings.tsx

@@ -20,7 +20,7 @@ enum Tab {
 
 const tabs = [Tab.General, Tab.Appearance, Tab.Plugins];
 
-export const Settings = () => {
+export default function Settings() {
   const osInfo = useOsInfo();
   const [tab, setTab] = useState<string>(Tab.General);
 
@@ -66,4 +66,4 @@ export const Settings = () => {
       </Tabs>
     </div>
   );
-};
+}

src-web/main.tsx

@@ -2,14 +2,15 @@ import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
 import { type } from '@tauri-apps/plugin-os';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { pdfjs } from 'react-pdf';
 import { App } from './components/App';
 import './main.css';
 
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-  'pdfjs-dist/build/pdf.worker.min.mjs',
-  import.meta.url,
-).toString();
+import('react-pdf').then(({ pdfjs }) => {
+  pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+    'pdfjs-dist/build/pdf.worker.min.mjs',
+    import.meta.url,
+  ).toString();
+});
 
 // Hide decorations here because it doesn't work in Rust for some reason (bug?)
 const osType = type();