fix: lighthouse performance issues (#223)

* chore: install cssnano and setup * chore: install prosemirror- packages ueberdosis/tiptap#3492 * Lazyload toaster, dialogs * Remove "import *"
proke03 · Jan 31, 2023 · 6d5efbc · 6d5efbc
1 parent deb65e4
commit 6d5efbc
Show file tree

Hide file tree

Showing 4 changed files with 1,426 additions and 1,547 deletions.
diff --git a/web/package.json b/web/package.json
@@ -48,7 +48,17 @@
     "graphql-ws": "^5.3.0",
     "i18next": "^20.3.4",
     "i18next-browser-languagedetector": "^6.1.2",
+    "prosemirror-commands": "^1.5.0",
+    "prosemirror-dropcursor": "^1.6.1",
+    "prosemirror-gapcursor": "^1.3.1",
+    "prosemirror-history": "^1.3.0",
     "prosemirror-inputrules": "^1.2.0",
+    "prosemirror-keymap": "^1.2.0",
+    "prosemirror-model": "^1.19.0",
+    "prosemirror-schema-list": "^1.2.2",
+    "prosemirror-state": "^1.4.2",
+    "prosemirror-transform": "^1.7.1",
+    "prosemirror-view": "^1.30.0",
     "react-contenteditable": "^3.3.5",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",

diff --git a/web/src/App.jsx b/web/src/App.jsx
@@ -1,24 +1,26 @@
+import { lazy, Suspense } from 'react'
 import { DndProvider } from 'react-dnd'
 import { TouchBackend } from 'react-dnd-touch-backend'
 import Routes from '@/pages/Routes'
 import { ApolloProvider } from '@apollo/client/react'
-import ResponsiveToaster from '@/components/ui/ResponsiveToaster'
-import CustomDragLayer from '@/components/ui/CustomDragLayer'
 import { BrowserRouter, HashRouter } from 'react-router-dom'
 import { Helmet, HelmetProvider } from 'react-helmet-async'
 import TitleBar from '@/components/ui/electron/titlebar/TitleBar'
 import { getOS } from '@/utils/getOS'
 import { apolloClient } from '@/graphql/apolloClient'
 import ContextMenuProvider from '@/providers/ContextMenuProvider'
-import LoginDialog from '@/components/LoginDialog'
-import UserDialog from '@/components/user/UserDialog'
 import UserProvider from '@/providers/UserProvider'
-import FindPasswordDialog from '@/components/FindPasswordDialog'
 
 export default function App() {
   const isMac = getOS() === 'Mac OS'
   const Router = window.electron ? HashRouter : BrowserRouter
 
+  const ResponsiveToaster = lazy(() => import('@/components/ui/ResponsiveToaster'))
+  const CustomDragLayer = lazy(() => import('@/components/ui/CustomDragLayer'))
+  const LoginDialog = lazy(() => import('@/components/LoginDialog'))
+  const FindPasswordDialog = lazy(() => import('@/components/FindPasswordDialog'))
+  const UserDialog = lazy(() => import('@/components/user/UserDialog'))
+
   return (
     <ApolloProvider client={apolloClient}>
       <HelmetProvider>
@@ -39,12 +41,12 @@ export default function App() {
                 backend={TouchBackend}
                 options={{ enableTouchEvents: false, enableMouseEvents: true }}
               >
-                <ResponsiveToaster />
-                <CustomDragLayer />
+                <Suspense fallback={<></>}><ResponsiveToaster /></Suspense>
+                <Suspense fallback={<></>}><CustomDragLayer /></Suspense>
+                <Suspense fallback={<></>}><LoginDialog /></Suspense>
                 {window.electron && !isMac && <TitleBar />}
-                <LoginDialog />
-                <FindPasswordDialog />
-                <UserDialog />
+                <Suspense fallback={<></>}><FindPasswordDialog /></Suspense>
+                <Suspense fallback={<></>}><UserDialog /></Suspense>
                 <div
                   style={
                     window.electron