Added route based code splitting

client/src/App.tsx

 
-import React from 'react';
+import { Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
-import Home from 'pages/Home';
-import Login from 'pages/Login';
+const Home = lazy(() => import('pages/Home'));
+const Login = lazy(() => import('pages/Login'));
 
 export default function App() {
     return (
         <Router>
-            <Switch>
-                <Route path="/login" component={Login} />
-                <Route path="/" component={Home} />
-            </Switch>
+            <Suspense fallback={false}>
+                <Switch>
+                    <Route path="/login" component={Login} />
+                    <Route path="/" component={Home} />
+                </Switch>
+            </Suspense>
         </Router>
     );
 }

client/src/index.scss

+
 @use 'styles/settings'as s;
 @use 'styles/mixins';
 @use 'styles/functions'as fn;
@@ -33,6 +34,7 @@ a {
     background: rgba(255, 255, 255, 0.4);
     backdrop-filter: blur(30px);
 }
+
 .content-container {
     max-width: 1280px;
     width: 100%;
@@ -40,12 +42,7 @@ a {
     padding: 20px;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h1, h2, h3, h4, h5, h6 {
     font-weight: s.$weight-bold;
 }
 
@@ -94,3 +91,4 @@ h4 {
         margin-bottom: fn.toRem(16);
     }
 }
+

client/src/pages/Login/index.tsx

+
 import './login.scss';
 
 export default function Login() {
@@ -6,3 +7,4 @@ export default function Login() {
         </div>
     );
 }
+