offload some page chunks

[alttp.git] / resources / js / app / Routes.js

diff --git a/resources/js/app/Routes.js b/resources/js/app/Routes.js
index 68c4290b0c1b9e759b2d8e6911bd6df1ec0537c7..e5da45f293d28b74c7f4c2fbe6fee5b1a54a2707 100644 (file)
--- a/resources/js/app/Routes.js
+++ b/resources/js/app/Routes.js
@@ -1,94 +1,136 @@
 import React from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import {
+       createBrowserRouter,
+       createRoutesFromElements,
+       Navigate,
+       Route,
+       RouterProvider,
+} from 'react-router-dom';
 
 import FullLayout from './FullLayout';
-import AlttpSeed from '../pages/AlttpSeed';
-import DiscordBot from '../pages/DiscordBot';
-import DoorsTracker from '../pages/DoorsTracker';
-import Event from '../pages/Event';
-import Events from '../pages/Events';
 import Front from '../pages/Front';
-import Map from '../pages/Map';
-import Schedule from '../pages/Schedule';
 import Technique from '../pages/Technique';
 import Techniques from '../pages/Techniques';
-import Tournament from '../pages/Tournament';
-import TwitchBot from '../pages/TwitchBot';
 import User from '../pages/User';
 
-const AppRoutes = () => <Routes>
-       <Route element={<FullLayout />}>
-               <Route
-                       path="discord-bot"
-                       element={<DiscordBot />}
-               />
-               <Route
-                       path="dungeons"
-                       element={<Techniques namespace="dungeons" type="dungeon" />}
-               />
-               <Route
-                       path="dungeons/:name"
-                       element={<Technique basepath="dungeons" type="dungeon" />}
-               />
-               <Route
-                       path="events"
-                       element={<Events />}
-               />
-               <Route
-                       path="events/:name"
-                       element={<Event />}
-               />
-               <Route path="h/:hash" element={<AlttpSeed />} />
-               <Route
-                       path="locations"
-                       element={<Techniques namespace="locations" type="location" />}
-               />
-               <Route
-                       path="locations/:name"
-                       element={<Technique basepath="locations" type="location" />}
-               />
-               <Route path="map">
-                       <Route index element={<Navigate replace to="lw" />} />
-                       <Route path=":activeMap" element={<Map />} />
-               </Route>
-               <Route
-                       path="modes"
-                       element={<Techniques namespace="modes" type="mode" />}
-               />
-               <Route
-                       path="modes/:name"
-                       element={<Technique basepath="modes" type="mode" />}
-               />
-               <Route
-                       path="rulesets"
-                       element={<Techniques namespace="rulesets" type="ruleset" />}
+const router = createBrowserRouter(
+       createRoutesFromElements(
+               <Route>
+                       <Route element={<FullLayout />}>
+                               <Route
+                                       path="discord-bot"
+                                       lazy={() => import(
+                                               /* webpackChunkName: "admin" */
+                                               '../pages/DiscordBot'
+                                       )}
+                               />
+                               <Route
+                                       path="dungeons"
+                                       element={<Techniques namespace="dungeons" type="dungeon" />}
+                               />
+                               <Route
+                                       path="dungeons/:name"
+                                       element={<Technique basepath="dungeons" type="dungeon" />}
+                               />
+                               <Route
+                                       path="events"
+                                       lazy={() => import(
+                                               /* webpackChunkName: "events" */
+                                               '../pages/Events'
+                                       )}
+                               />
+                               <Route
+                                       path="events/:name"
+                                       lazy={() => import(
+                                               /* webpackChunkName: "events" */
+                                               '../pages/Event'
+                                       )}
+                               />
+                               <Route
+                                       path="h/:hash"
+                                       lazy={() => import(
+                                               /* webpackChunkName: "seeds" */
+                                               '../pages/AlttpSeed'
+                                       )}
+                               />
+                               <Route
+                                       path="locations"
+                                       element={<Techniques namespace="locations" type="location" />}
+                               />
+                               <Route
+                                       path="locations/:name"
+                                       element={<Technique basepath="locations" type="location" />}
+                               />
+                               <Route path="map">
+                                       <Route index element={<Navigate replace to="lw" />} />
+                                       <Route
+                                               path=":activeMap"
+                                               lazy={() => import(
+                                                       /* webpackChunkName: "map" */
+                                                       '../pages/Map'
+                                               )}
+                                       />
+                               </Route>
+                               <Route
+                                       path="modes"
+                                       element={<Techniques namespace="modes" type="mode" />}
+                               />
+                               <Route
+                                       path="modes/:name"
+                                       element={<Technique basepath="modes" type="mode" />}
+                               />
+                               <Route
+                                       path="rulesets"
+                                       element={<Techniques namespace="rulesets" type="ruleset" />}
+                                       />
+                               <Route
+                                       path="rulesets/:name"
+                                       element={<Technique basepath="rulesets" type="ruleset" />}
+                               />
+                               <Route
+                                       path="schedule"
+                                       lazy={() => import(
+                                               /* webpackChunkName: "events" */
+                                               '../pages/Schedule'
+                                       )}
+                               />
+                               <Route
+                                       path="tech"
+                                       element={<Techniques namespace="techniques" type="tech" />}
+                               />
+                               <Route
+                                       path="tech/:name"
+                                       element={<Technique basepath="tech" type="tech" />}
+                               />
+                               <Route
+                                       path="tournaments/:id"
+                                       lazy={() => import(
+                                               /* webpackChunkName: "tournament" */
+                                               '../pages/Tournament'
+                                       )}
+                               />
+                               <Route
+                                       path="twitch-bot"
+                                       lazy={() => import(
+                                               /* webpackChunkName: "admin" */
+                                               '../pages/TwitchBot'
+                                       )}
+                               />
+                               <Route path="users/:id" element={<User />} />
+                               <Route path="/" element={<Front />} />
+                               <Route path="*" element={<Navigate to="/" />} />
+                       </Route>
+                       <Route
+                               path="doors-tracker"
+                               lazy={() => import(
+                                       /* webpackChunkName: "tracker" */
+                                       '../pages/DoorsTracker'
+                               )}
                        />
-               <Route
-                       path="rulesets/:name"
-                       element={<Technique basepath="rulesets" type="ruleset" />}
-               />
-               <Route path="schedule" element={<Schedule />} />
-               <Route
-                       path="tech"
-                       element={<Techniques namespace="techniques" type="tech" />}
-               />
-               <Route
-                       path="tech/:name"
-                       element={<Technique basepath="tech" type="tech" />}
-               />
-               <Route path="tournaments/:id" element={<Tournament />} />
-               <Route
-                       path="twitch-bot"
-                       element={<TwitchBot />}
-               />
-               <Route path="users/:id" element={<User />} />
-               <Route path="/" element={<Front />} />
-               <Route path="*" element={<Navigate to="/" />} />
-       </Route>
-       <Route
-               path="doors-tracker"
-               element={<DoorsTracker />}
-       />
-</Routes>;
+               </Route>
+       )
+);
+
+const AppRoutes = () => <RouterProvider router={router} />;
 
 export default AppRoutes;