improve code splitting

slidr-app · May 14, 2023 · 28099e4 · 28099e4
1 parent 95a80e1
commit 28099e4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 63 deletions.
diff --git a/src/index.css b/src/index.css
@@ -2,63 +2,7 @@ body {
   --uno: m-0 bg-black;
 }
 
-/* :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
+/*
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
@@ -70,4 +14,5 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-} */
+}
+*/
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,16 +1,17 @@
 // eslint-disable-line unicorn/filename-case
-import React from 'react';
+import React, {lazy, Suspense} from 'react';
 import ReactDOM from 'react-dom/client';
 import '@unocss/reset/tailwind.css';
 import 'virtual:uno.css';
 import {createBrowserRouter, RouterProvider} from 'react-router-dom';
 import './index.css';
-import Presentation from './Presentation.tsx';
-import Speaker from './Speaker.tsx';
-import Viewer from './Viewer.tsx';
 import Home from './Home.tsx';
 import {presentations} from './presentation-urls.ts';
 
+const Viewer = lazy(async () => import('./Viewer.tsx'));
+const Speaker = lazy(async () => import('./Speaker.tsx'));
+const Presentation = lazy(async () => import('./Presentation.tsx'));
+
 const router = createBrowserRouter([
   {
     path: '/',
@@ -33,7 +34,9 @@ const router = createBrowserRouter([
 ReactDOM.createRoot(document.querySelector('#root')!).render(
   <React.StrictMode>
     <div className="text-white font-sans text-xl">
-      <RouterProvider router={router} />
+      <Suspense fallback={<div>wait</div>}>
+        <RouterProvider router={router} />
+      </Suspense>
     </div>
   </React.StrictMode>,
 );