lazy load routers , improve performance 🚀

issam-seghir · Dec 14, 2023 · 80d179c · 80d179c
1 parent c043368
commit 80d179c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 36 deletions.
diff --git a/src/jsx/main.jsx b/src/jsx/main.jsx
@@ -4,28 +4,39 @@ import "@scss/main.scss";
 
 import { ContextProvider } from "@contexts/ContextProvider";
 
-import Loading from "@pages/Loading";
+// import Loading from "@pages/Loading";
 
 import { registerLicense } from "@syncfusion/ej2-base";
-import React from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import React from "react";
 
-import Analytics from "@pages/Analytics";
+// import Analytics from "@pages/Analytics";
 import App from "@pages/App";
-import Customers from "@pages/Customers";
-import Drawer from "@pages/Drawer";
-import Ecommerce from "@pages/Ecommerce";
-import Editor from "@pages/Editor";
-import Employees from "@pages/Employees";
+// import Customers from "@pages/Customers";
+// import Drawer from "@pages/Drawer";
+// import Ecommerce from "@pages/Ecommerce";
+// import Editor from "@pages/Editor";
+// import Employees from "@pages/Employees";
 import Error from "@pages/Error";
-import Kanban from "@pages/Kanban";
-import Map from "@pages/Map";
-import Orders from "@pages/Orders";
-import Scheduler from "@pages/Scheduler";
-import Tracker from "@pages/Tracker";
+// import Kanban from "@pages/Kanban";
+// import Map from "@pages/Map";
+// import Orders from "@pages/Orders";
+// import Scheduler from "@pages/Scheduler";
+// import Tracker from "@pages/Tracker";
 
+const LazyLoading = React.lazy(() => import("@pages/Loading"));
+const LazyTracker = React.lazy(() => import("@pages/Tracker"));
+const LazyScheduler = React.lazy(() => import("@pages/Scheduler"));
+const LazyOrders = React.lazy(() => import("@pages/Orders"));
+const LazyMap = React.lazy(() => import("@pages/Map"));
+const LazyKanban = React.lazy(() => import("@pages/Kanban"));
+const LazyEmployees = React.lazy(() => import("@pages/Employees"));
+const LazyEditor = React.lazy(() => import("@pages/Editor"));
 const LazyEcommerce = React.lazy(() => import("@pages/Ecommerce"));
+const LazyDrawer = React.lazy(() => import("@pages/Drawer"));
+const LazyCustomers = React.lazy(() => import("@pages/Customers"));
+const LazyAnalytics = React.lazy(() => import("@pages/Analytics"));
 
 // Registering Syncfusion license key
 registerLicense(import.meta.env.VITE_SYNCFUSION_LICENSE_KEY);
@@ -38,51 +49,51 @@ export const router = createBrowserRouter(
 			children: [
 				{
 					index: true,
-					element: <Ecommerce />,
+					element: <LazyEcommerce />,
 				},
 				{
 					path: "ecommerce",
 					element: <LazyEcommerce />,
 				},
 				{
 					path: "orders",
-					element: <Orders />,
+					element: <LazyOrders />,
 				},
 				{
 					path: "employees",
-					element: <Employees />,
+					element: <LazyEmployees />,
 				},
 				{
 					path: "customers",
-					element: <Customers />,
+					element: <LazyCustomers />,
 				},
 				{
 					path: "scheduler",
-					element: <Scheduler />,
+					element: <LazyScheduler />,
 				},
 				{
 					path: "kanban",
-					element: <Kanban />,
+					element: <LazyKanban />,
 				},
 				{
 					path: "markdawn-editor",
-					element: <Editor />,
+					element: <LazyEditor />,
 				},
 				{
 					path: "drawer",
-					element: <Drawer />,
+					element: <LazyDrawer />,
 				},
 				{
 					path: "analytics",
-					element: <Analytics />,
+					element: <LazyAnalytics />,
 				},
 				{
 					path: "tracker",
-					element: <Tracker />,
+					element: <LazyTracker />,
 				},
 				{
 					path: "map",
-					element: <Map />,
+					element: <LazyMap />,
 				},
 			],
 		},
@@ -93,7 +104,7 @@ export const router = createBrowserRouter(
 ReactDOM.createRoot(document.getElementById("root")).render(
 	<React.StrictMode>
 		<ContextProvider>
-			<RouterProvider router={router} fallbackElement={<Loading />} />
+				<RouterProvider router={router} fallbackElement={<LazyLoading />} />
 		</ContextProvider>
 	</React.StrictMode>
 );
diff --git a/src/jsx/pages/App.jsx b/src/jsx/pages/App.jsx
@@ -15,7 +15,7 @@ import SettingsButton from "@jsx/components/ui/SettingsButton";
 
 import Seo from "@components/Seo";
 import { initSyncfusionLocalization } from "@data/localization/syncfusion-localization";
-import { useEffect } from "react";
+import { useEffect, Suspense } from "react";
 
 function App() {
 	const { theme, loading, language, status } = useThemeContext();
@@ -158,7 +158,9 @@ function App() {
 									</g>
 								</svg>
 							</CardCover>
-							<Outlet />
+							<Suspense fallback={<Loading />}>
+								<Outlet />
+							</Suspense>
 						</Box>
 					</Sheet>
 				)}

diff --git a/vite.config.js b/vite.config.js
@@ -7,19 +7,19 @@ import svgr from "vite-plugin-svgr";
 export default defineConfig(({ command, mode, ssrBuild }) => ({
 	base: "/astralyn/",
 	// Getting rid of hashes in generated filenames
-	filenameHashing: false,
+	filenameHashing: true,
 	build: {
 		// cssMinify: false, // disable CSS minify only
 		// minify: false, // disable CSS/JS minify only
 		// change output location
-		rollupOptions: {
-			output: {
-				manualChunks: undefined,
-				assetFileNames: "assets/[name].[ext]", // Output assets (e.g., images, SVGs) to the assets folder
-				entryFileNames: "assets/[name].js", // Output entry files (e.g., JavaScript) to the root directory
-				chunkFileNames: "assets/[name].[ext]", // Output dynamic imports (chunks) to the assets folder
-			},
-		},
+		// rollupOptions: {
+		// 	output: {
+		// 		manualChunks: undefined,
+		// 		assetFileNames: "assets/[name].[ext]", // Output assets (e.g., images, SVGs) to the assets folder
+		// 		entryFileNames: "assets/[name].js", // Output entry files (e.g., JavaScript) to the root directory
+		// 		chunkFileNames: "assets/[name].[ext]", // Output dynamic imports (chunks) to the assets folder
+		// 	},
+		// },
 	},
 
 	server: {