perf(web): lazy loading

This adds lazy loading to the web frontend to improve performance. Signed-off-by: James Elliott <james-d-elliott@users.noreply.github.com>
authelia · Mar 4, 2024 · 87747a5 · 87747a5
1 parent e618cf3
commit 87747a5
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 15 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState } from "react";
+import React, { Suspense, lazy, useEffect, useState } from "react";
 
 import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
@@ -27,15 +27,16 @@ import {
     getTheme,
 } from "@utils/Configuration";
 import BaseLoadingPage from "@views/LoadingPage/BaseLoadingPage";
-import ConsentView from "@views/LoginPortal/ConsentView/ConsentView";
 import LoginPortal from "@views/LoginPortal/LoginPortal";
-import SignOut from "@views/LoginPortal/SignOut/SignOut";
-import ResetPasswordStep1 from "@views/ResetPassword/ResetPasswordStep1";
-import ResetPasswordStep2 from "@views/ResetPassword/ResetPasswordStep2";
-import SettingsRouter from "@views/Settings/SettingsRouter";
 
 import "@fortawesome/fontawesome-svg-core/styles.css";
 
+const ConsentView = lazy(() => import("@views/LoginPortal/ConsentView/ConsentView"));
+const SignOut = lazy(() => import("@views/LoginPortal/SignOut/SignOut"));
+const ResetPasswordStep1 = lazy(() => import("@views/ResetPassword/ResetPasswordStep1"));
+const ResetPasswordStep2 = lazy(() => import("@views/ResetPassword/ResetPasswordStep2"));
+const SettingsRouter = lazy(() => import("@views/Settings/SettingsRouter"));
+
 faConfig.autoAddCss = false;
 
 function Theme() {

diff --git a/web/src/views/LoginPortal/LoginPortal.tsx b/web/src/views/LoginPortal/LoginPortal.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, ReactNode, useEffect, useState } from "react";
+import React, { Fragment, ReactNode, lazy, useEffect, useState } from "react";
 
 import { Route, Routes, useLocation } from "react-router-dom";
 
@@ -22,9 +22,10 @@ import { SecondFactorMethod } from "@models/Methods";
 import { checkSafeRedirection } from "@services/SafeRedirection";
 import { AuthenticationLevel } from "@services/State";
 import LoadingPage from "@views/LoadingPage/LoadingPage";
-import AuthenticatedView from "@views/LoginPortal/AuthenticatedView/AuthenticatedView";
-import FirstFactorForm from "@views/LoginPortal/FirstFactor/FirstFactorForm";
-import SecondFactorForm from "@views/LoginPortal/SecondFactor/SecondFactorForm";
+
+const AuthenticatedView = lazy(() => import("@views/LoginPortal/AuthenticatedView/AuthenticatedView"));
+const FirstFactorForm = lazy(() => import("@views/LoginPortal/FirstFactor/FirstFactorForm"));
+const SecondFactorForm = lazy(() => import("@views/LoginPortal/SecondFactor/SecondFactorForm"));
 
 export interface Props {
     duoSelfEnrollment: boolean;

diff --git a/web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx b/web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { lazy, useEffect, useState } from "react";
 
 import { Button, Grid, Theme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
@@ -22,9 +22,10 @@ import { UserInfo } from "@models/UserInfo";
 import { AuthenticationLevel } from "@services/State";
 import { setPreferred2FAMethod } from "@services/UserInfo";
 import MethodSelectionDialog from "@views/LoginPortal/SecondFactor/MethodSelectionDialog";
-import OneTimePasswordMethod from "@views/LoginPortal/SecondFactor/OneTimePasswordMethod";
-import PushNotificationMethod from "@views/LoginPortal/SecondFactor/PushNotificationMethod";
-import WebAuthnMethod from "@views/LoginPortal/SecondFactor/WebAuthnMethod";
+
+const OneTimePasswordMethod = lazy(() => import("@views/LoginPortal/SecondFactor/OneTimePasswordMethod"));
+const PushNotificationMethod = lazy(() => import("@views/LoginPortal/SecondFactor/PushNotificationMethod"));
+const WebAuthnMethod = lazy(() => import("@views/LoginPortal/SecondFactor/WebAuthnMethod"));
 
 export interface Props {
     authenticationLevel: AuthenticationLevel;

diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -35,7 +35,49 @@ export default defineConfig(({ mode }) => {
 
                         return "static/media/[name].[hash].[ext]";
                     },
-                    chunkFileNames: `static/js/[name].[hash].js`,
+                    chunkFileNames: (chunkInfo) => {
+                        switch (chunkInfo.name) {
+                            case "index":
+                                return `static/js/[name].[hash].js`;
+                            default:
+                                if (chunkInfo.moduleIds.length === 0) {
+                                    return `static/js/[name].[hash].js`;
+                                }
+
+                                const last = chunkInfo.moduleIds[chunkInfo.moduleIds.length - 1];
+
+                                if (last.includes("@mui/")) {
+                                    return `static/js/mui.[name].[hash].js`;
+                                }
+
+                                const match = last.match(/authelia\/authelia\/web\/src\/([a-zA-Z]+)\/([a-zA-Z]+)/);
+
+                                if (match) {
+                                    switch (match[2]) {
+                                        case "LoginPortal":
+                                            return `static/js/portal.[name].[hash].js`;
+                                        case "ResetPassword":
+                                            return `static/js/reset-password.[name].[hash].js`;
+                                        case "Settings":
+                                            switch (chunkInfo.name) {
+                                                case "SettingsRouter":
+                                                    return `static/js/settings.router.[hash].js`;
+                                                default:
+                                                    return `static/js/settings.[name].[hash].js`;
+                                            }
+                                        default:
+                                            switch (chunkInfo.name) {
+                                                case "LoginLayout":
+                                                    return `static/js/${match[1]}.Login.[hash].js`;
+                                                default:
+                                                    return `static/js/${match[1]}.[name].[hash].js`;
+                                            }
+                                    }
+                                }
+
+                                return `static/js/[name].[hash].js`;
+                        }
+                    },
                     entryFileNames: `static/js/[name].[hash].js`,
                 },
             },