Frontend basic code splitting

Author: Enrique Moreno Cano

app/frontend/src/index.tsx

@@ -1,33 +1,38 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { HashRouter, Routes, Route } from "react-router-dom";
+import { createHashRouter, RouterProvider } from "react-router-dom";
 import { initializeIcons } from "@fluentui/react";
 
 import "./index.css";
 
 import Layout from "./pages/layout/Layout";
-import NoPage from "./pages/NoPage";
-import OneShot from "./pages/oneshot/OneShot";
 import Chat from "./pages/chat/Chat";
 
 initializeIcons();
 
-export default function App() {
-    return (
-        <HashRouter>
-            <Routes>
-                <Route path="/" element={<Layout />}>
-                    <Route index element={<Chat />} />
-                    <Route path="qa" element={<OneShot />} />
-                    <Route path="*" element={<NoPage />} />
-                </Route>
-            </Routes>
-        </HashRouter>
-    );
-}
+const router = createHashRouter([
+    {
+        path: "/",
+        element: <Layout />,
+        children: [
+            {
+                index: true,
+                element: <Chat />
+            },
+            {
+                path: "qa",
+                lazy: () => import("./pages/oneshot/OneShot")
+            },
+            {
+                path: "*",
+                lazy: () => import("./pages/NoPage")
+            }
+        ]
+    }
+]);
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <React.StrictMode>
-        <App />
+        <RouterProvider router={router} />
     </React.StrictMode>
 );

app/frontend/src/pages/NoPage.tsx

@@ -1,5 +1,5 @@
-const NoPage = () => {
+export function Component(): JSX.Element {
     return <h1>404</h1>;
-};
+}
 
-export default NoPage;
+Component.displayName = "NoPage";

app/frontend/src/pages/oneshot/OneShot.tsx

@@ -10,7 +10,7 @@ import { ExampleList } from "../../components/Example";
 import { AnalysisPanel, AnalysisPanelTabs } from "../../components/AnalysisPanel";
 import { SettingsButton } from "../../components/SettingsButton/SettingsButton";
 
-const OneShot = () => {
+export function Component(): JSX.Element {
     const [isConfigPanelOpen, setIsConfigPanelOpen] = useState(false);
     const [approach, setApproach] = useState<Approaches>(Approaches.RetrieveThenRead);
     const [promptTemplate, setPromptTemplate] = useState<string>("");
@@ -246,6 +246,6 @@ const OneShot = () => {
             </Panel>
         </div>
     );
-};
+}
 
-export default OneShot;
+Component.displayName = "OneShot";

app/frontend/vite.config.ts

@@ -7,7 +7,20 @@ export default defineConfig({
     build: {
         outDir: "../backend/static",
         emptyOutDir: true,
-        sourcemap: true
+        sourcemap: true,
+        rollupOptions: {
+            output: {
+                manualChunks: id => {
+                    if (id.includes("@fluentui/react-icons")) {
+                        return "fluentui-icons";
+                    } else if (id.includes("@fluentui/react")) {
+                        return "fluentui-react";
+                    } else if (id.includes("node_modules")) {
+                        return "vendor";
+                    }
+                }
+            }
+        }
     },
     server: {
         proxy: {