chore: compress and lazy load client code (#2425)

apps/client/package.json

@@ -4,7 +4,7 @@
   "version": "0.95.0",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && node scripts/compress-dist.mjs",
     "lint": "eslint .",
     "preview": "vite preview",
     "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\"",

apps/client/scripts/compress-dist.mjs

@@ -0,0 +1,48 @@
+import { promises as fs } from "node:fs";
+import { join, extname } from "node:path";
+import { promisify } from "node:util";
+import zlib from "node:zlib";
+
+const gzip = promisify(zlib.gzip);
+const brotli = promisify(zlib.brotliCompress);
+
+const DIST = new URL("../dist", import.meta.url).pathname;
+// index.html is rewritten by the server at boot, so html must not be precompressed
+const COMPRESSIBLE = new Set([".js", ".css", ".svg", ".json", ".txt", ".map"]);
+const MIN_SIZE = 1024;
+
+async function* walk(dir) {
+  for (const entry of await fs.readdir(dir, { withFileTypes: true })) {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) yield* walk(path);
+    else yield path;
+  }
+}
+
+const files = [];
+for await (const file of walk(DIST)) {
+  if (!COMPRESSIBLE.has(extname(file))) continue;
+  const { size } = await fs.stat(file);
+  if (size >= MIN_SIZE) files.push(file);
+}
+
+await Promise.all(
+  files.map(async (file) => {
+    const content = await fs.readFile(file);
+    const [gz, br] = await Promise.all([
+      gzip(content, { level: 9 }),
+      brotli(content, {
+        params: {
+          [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
+          [zlib.constants.BROTLI_PARAM_SIZE_HINT]: content.length,
+        },
+      }),
+    ]);
+    await Promise.all([
+      fs.writeFile(`${file}.gz`, gz),
+      fs.writeFile(`${file}.br`, br),
+    ]);
+  }),
+);
+
+console.log(`precompressed ${files.length} assets (.gz/.br)`);

apps/client/src/App.tsx

@@ -1,60 +1,92 @@
+import { lazy, Suspense, useEffect } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
-import SetupWorkspace from "@/pages/auth/setup-workspace.tsx";
-import LoginPage from "@/pages/auth/login";
-import Home from "@/pages/dashboard/home";
-import Page from "@/pages/page/page";
-import AccountSettings from "@/pages/settings/account/account-settings";
-import WorkspaceMembers from "@/pages/settings/workspace/workspace-members";
-import WorkspaceSettings from "@/pages/settings/workspace/workspace-settings";
-import Groups from "@/pages/settings/group/groups";
-import GroupInfo from "./pages/settings/group/group-info";
-import Spaces from "@/pages/settings/space/spaces.tsx";
-import { Error404 } from "@/components/ui/error-404.tsx";
-import AccountPreferences from "@/pages/settings/account/account-preferences.tsx";
-import SpaceHome from "@/pages/space/space-home.tsx";
-import PageRedirect from "@/pages/page/page-redirect.tsx";
 import Layout from "@/components/layouts/global/layout.tsx";
-import InviteSignup from "@/pages/auth/invite-signup.tsx";
+import { Error404 } from "@/components/ui/error-404.tsx";
-import ForgotPassword from "@/pages/auth/forgot-password.tsx";
-import PasswordReset from "./pages/auth/password-reset";
-import Billing from "@/ee/billing/pages/billing.tsx";
-import CloudLogin from "@/ee/pages/cloud-login.tsx";
-import CreateWorkspace from "@/ee/pages/create-workspace.tsx";
 import { isCloud } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";
-import Security from "@/ee/security/pages/security.tsx";
-import License from "@/ee/licence/pages/license.tsx";
 import { useRedirectToCloudSelect } from "@/ee/hooks/use-redirect-to-cloud-select.tsx";
-import SharedPage from "@/pages/share/shared-page.tsx";
-import PdfRenderPage from "@/ee/pdf-export/pdf-render-page.tsx";
-import Shares from "@/pages/settings/shares/shares.tsx";
-import ShareLayout from "@/features/share/components/share-layout.tsx";
-import ShareRedirect from "@/pages/share/share-redirect.tsx";
 import { useTrackOrigin } from "@/hooks/use-track-origin";
-import SpacesPage from "@/pages/spaces/spaces.tsx";
+
-import { MfaChallengePage } from "@/ee/mfa/pages/mfa-challenge-page";
+const SetupWorkspace = lazy(() => import("@/pages/auth/setup-workspace.tsx"));
-import { MfaSetupRequiredPage } from "@/ee/mfa/pages/mfa-setup-required-page";
+const LoginPage = lazy(() => import("@/pages/auth/login"));
-import SpaceTrash from "@/pages/space/space-trash.tsx";
+const Home = lazy(() => import("@/pages/dashboard/home"));
-import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
+const Page = lazy(() => import("@/pages/page/page"));
-import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
+const AccountSettings = lazy(
-import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
+  () => import("@/pages/settings/account/account-settings"),
-import BasePage from "@/ee/base/pages/base-page.tsx";
+);
-import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
+const WorkspaceMembers = lazy(
-import VerifiedPages from "@/ee/page-verification/pages/verified-pages.tsx";
+  () => import("@/pages/settings/workspace/workspace-members"),
-import TemplateList from "@/ee/template/pages/template-list";
+);
-import TemplateEditor from "@/ee/template/pages/template-editor";
+const WorkspaceSettings = lazy(
-import FavoritesPage from "@/pages/favorites/favorites-page";
+  () => import("@/pages/settings/workspace/workspace-settings"),
-import AiChat from "@/ee/ai-chat/pages/ai-chat.tsx";
+);
-import VerifyEmail from "@/ee/pages/verify-email.tsx";
+const Groups = lazy(() => import("@/pages/settings/group/groups"));
-import LabelPage from "@/pages/label/label-page";
+const GroupInfo = lazy(() => import("./pages/settings/group/group-info"));
+const Spaces = lazy(() => import("@/pages/settings/space/spaces.tsx"));
+const AccountPreferences = lazy(
+  () => import("@/pages/settings/account/account-preferences.tsx"),
+);
+const SpaceHome = lazy(() => import("@/pages/space/space-home.tsx"));
+const PageRedirect = lazy(() => import("@/pages/page/page-redirect.tsx"));
+const InviteSignup = lazy(() => import("@/pages/auth/invite-signup.tsx"));
+const ForgotPassword = lazy(() => import("@/pages/auth/forgot-password.tsx"));
+const PasswordReset = lazy(() => import("./pages/auth/password-reset"));
+const Billing = lazy(() => import("@/ee/billing/pages/billing.tsx"));
+const CloudLogin = lazy(() => import("@/ee/pages/cloud-login.tsx"));
+const CreateWorkspace = lazy(() => import("@/ee/pages/create-workspace.tsx"));
+const Security = lazy(() => import("@/ee/security/pages/security.tsx"));
+const License = lazy(() => import("@/ee/licence/pages/license.tsx"));
+const SharedPage = lazy(() => import("@/pages/share/shared-page.tsx"));
+const PdfRenderPage = lazy(() => import("@/ee/pdf-export/pdf-render-page.tsx"));
+const Shares = lazy(() => import("@/pages/settings/shares/shares.tsx"));
+const ShareLayout = lazy(
+  () => import("@/features/share/components/share-layout.tsx"),
+);
+const ShareRedirect = lazy(() => import("@/pages/share/share-redirect.tsx"));
+const SpacesPage = lazy(() => import("@/pages/spaces/spaces.tsx"));
+const MfaChallengePage = lazy(() =>
+  import("@/ee/mfa/pages/mfa-challenge-page").then((m) => ({
+    default: m.MfaChallengePage,
+  })),
+);
+const MfaSetupRequiredPage = lazy(() =>
+  import("@/ee/mfa/pages/mfa-setup-required-page").then((m) => ({
+    default: m.MfaSetupRequiredPage,
+  })),
+);
+const SpaceTrash = lazy(() => import("@/pages/space/space-trash.tsx"));
+const UserApiKeys = lazy(() => import("@/ee/api-key/pages/user-api-keys"));
+const WorkspaceApiKeys = lazy(
+  () => import("@/ee/api-key/pages/workspace-api-keys"),
+);
+const AiSettings = lazy(() => import("@/ee/ai/pages/ai-settings.tsx"));
+const BasePage = lazy(() => import("@/ee/base/pages/base-page.tsx"));
+const AuditLogs = lazy(() => import("@/ee/audit/pages/audit-logs.tsx"));
+const VerifiedPages = lazy(
+  () => import("@/ee/page-verification/pages/verified-pages.tsx"),
+);
+const TemplateList = lazy(() => import("@/ee/template/pages/template-list"));
+const TemplateEditor = lazy(
+  () => import("@/ee/template/pages/template-editor"),
+);
+const FavoritesPage = lazy(() => import("@/pages/favorites/favorites-page"));
+const AiChat = lazy(() => import("@/ee/ai-chat/pages/ai-chat.tsx"));
+const VerifyEmail = lazy(() => import("@/ee/pages/verify-email.tsx"));
+const LabelPage = lazy(() => import("@/pages/label/label-page"));
 
 export default function App() {
   const { t } = useTranslation();
   useRedirectToCloudSelect();
   useTrackOrigin();
 
+  useEffect(() => {
+    // warm the editor chunk so opening a page doesn't wait on the network
+    const timer = setTimeout(() => import("@/pages/page/page"), 3000);
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
-    <>
+    <Suspense fallback={null}>
       <Routes>
         <Route index element={<Navigate to="/home" />} />
         <Route path={"/login"} element={<LoginPage />} />
@@ -135,6 +167,6 @@ export default function App() {
 
         <Route path="*" element={<Error404 />} />
       </Routes>
-    </>
+    </Suspense>
   );
 }

apps/client/src/components/layouts/global/aside.tsx

@@ -1,17 +1,30 @@
 import { ActionIcon, Box, Group, ScrollArea, Title, Tooltip } from "@mantine/core";
 import { IconX } from "@tabler/icons-react";
-import CommentListWithTabs from "@/features/comment/components/comment-list-with-tabs.tsx";
 import { useAtom } from "jotai";
 import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
-import React, { ReactNode, useEffect } from "react";
+import React, { lazy, ReactNode, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { TableOfContents } from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
 import { useAtomValue } from "jotai";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
-import AsideChatPanel from "@/ee/ai-chat/components/aside-chat-panel";
-import { PageDetailsAside } from "@/features/page-details/components/page-details-aside.tsx";
 import { ASIDE_PANEL_ID } from "@/hooks/use-toggle-aside.tsx";
 
+const CommentListWithTabs = lazy(
+  () => import("@/features/comment/components/comment-list-with-tabs.tsx"),
+);
+const TableOfContents = lazy(() =>
+  import(
+    "@/features/editor/components/table-of-contents/table-of-contents.tsx"
+  ).then((m) => ({ default: m.TableOfContents })),
+);
+const AsideChatPanel = lazy(
+  () => import("@/ee/ai-chat/components/aside-chat-panel"),
+);
+const PageDetailsAside = lazy(() =>
+  import("@/features/page-details/components/page-details-aside.tsx").then(
+    (m) => ({ default: m.PageDetailsAside }),
+  ),
+);
+
 export default function Aside() {
   const [{ tab, isAsideOpen }, setAsideState] = useAtom(asideStateAtom);
   const { t } = useTranslation();
@@ -68,6 +81,7 @@ export default function Aside() {
             </Group>
           )}
 
+          <Suspense fallback={null}>
             {tab === "comments" || tab === "chat" ? (
               component
             ) : (
@@ -79,6 +93,7 @@ export default function Aside() {
                 <div style={{ paddingBottom: "200px" }}>{component}</div>
               </ScrollArea>
             )}
+          </Suspense>
         </>
       )}
     </Box>

apps/client/src/components/layouts/global/global-app-shell.tsx

@@ -11,7 +11,10 @@ import {
   sidebarWidthAtom,
 } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import { SpaceSidebar } from "@/features/space/components/sidebar/space-sidebar.tsx";
-import AiChatSidebar from "@/ee/ai-chat/components/ai-chat-sidebar.tsx";
+
+const AiChatSidebar = React.lazy(
+  () => import("@/ee/ai-chat/components/ai-chat-sidebar.tsx"),
+);
 import { AppHeader } from "@/components/layouts/global/app-header.tsx";
 import Aside from "@/components/layouts/global/aside.tsx";
 import classes from "./app-shell.module.css";
@@ -126,7 +129,11 @@ export default function GlobalAppShell({
         )}
         {isSpaceRoute && <SpaceSidebar />}
         {isSettingsRoute && <SettingsSidebar />}
-        {isAiRoute && <AiChatSidebar />}
+        {isAiRoute && (
+          <React.Suspense fallback={null}>
+            <AiChatSidebar />
+          </React.Suspense>
+        )}
         {showGlobalSidebar && <GlobalSidebar />}
       </AppShell.Navbar>
       <AppShell.Main id={MAIN_CONTENT_ID} tabIndex={-1}>

apps/client/src/features/space/components/sidebar/space-sidebar.tsx

@@ -54,7 +54,9 @@ import {
 import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import { searchSpotlight } from "@/features/search/constants";
-import TemplatePickerModal from "@/ee/template/components/template-picker-modal";
+const TemplatePickerModal = React.lazy(
+  () => import("@/ee/template/components/template-picker-modal"),
+);
 import { useHasFeature } from "@/ee/hooks/use-feature";
 import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
 import { Feature } from "@/ee/features";
@@ -406,11 +408,13 @@ function SpaceMenu({
 
       {hasTemplates && templatePickerOpened && (
         <ErrorBoundary fallbackRender={() => null}>
+          <React.Suspense fallback={null}>
             <TemplatePickerModal
               opened={templatePickerOpened}
               onClose={closeTemplatePicker}
               initialSpaceId={spaceId}
             />
+          </React.Suspense>
         </ErrorBoundary>
       )}
     </>

apps/server/src/integrations/static/static.module.ts

@@ -71,6 +71,16 @@ export class StaticModule implements OnModuleInit {
       await app.register(fastifyStatic, {
         root: clientDistPath,
         wildcard: false,
+        preCompressed: true,
+        setHeaders: (reply: any, pathName: string) => {
+          // Vite content-hashes everything under /assets, so they can be cached forever
+          if (/[\\/]assets[\\/]/.test(pathName)) {
+            reply.header(
+              'Cache-Control',
+              'public, max-age=31536000, immutable',
+            );
+          }
+        },
       });
 
       app.get(RENDER_PATH, (req: any, res: any) => {