perf: lazy-load heavy routes, on-demand highlight.js, and optimize first-load UX

apps/site/package.json

@@ -48,13 +48,11 @@
     "@tanstack/react-devtools": "^0.7.11",
     "@tanstack/react-query-devtools": "^5.91.3",
     "@tanstack/react-router-devtools": "^1.166.2",
-    "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^22.19.13",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
-    "jsdom": "^27.4.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^3.2.4"

apps/site/public/manifest.json

@@ -1 +1,12 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+  "name": "Memos Embed",
+  "short_name": "MemosEmbed",
+  "description": "Embeddable memo cards for Memos — iframe, Web Component, and React snippets",
+  "icons": [
+    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#111827",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

apps/site/src/__tests__/embed-route.test.tsx

@@ -1,6 +1,6 @@
 import { render, waitFor } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { EmbedPreview } from "@/routes/embed/$memoId";
+import { EmbedPreview } from "@/routes/embed/$memoId.lazy";
 
 const createDomRect = (height: number): DOMRect =>
 	({

apps/site/src/__tests__/smoke.test.ts

@@ -1,7 +1,7 @@
 import { cleanup, render, screen } from "@testing-library/react";
 import { createElement } from "react";
 import { afterEach, describe, expect, it } from "vitest";
-import { DocsPageContent } from "@/routes/docs/index";
+import { DocsPageContent } from "@/routes/docs/index.lazy";
 import { HomePageContent } from "@/routes/index";
 
 afterEach(() => {

apps/site/src/routeTree.gen.ts

@@ -23,17 +23,19 @@ const PlaygroundIndexRoute = PlaygroundIndexRouteImport.update({
   id: '/playground/',
   path: '/playground/',
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any).lazy(() =>
+  import('./routes/playground/index.lazy').then((d) => d.Route),
+)
 const DocsIndexRoute = DocsIndexRouteImport.update({
   id: '/docs/',
   path: '/docs/',
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any).lazy(() => import('./routes/docs/index.lazy').then((d) => d.Route))
 const EmbedMemoIdRoute = EmbedMemoIdRouteImport.update({
   id: '/embed/$memoId',
   path: '/embed/$memoId',
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any).lazy(() => import('./routes/embed/$memoId.lazy').then((d) => d.Route))
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute

apps/site/src/routes/__root.tsx

@@ -1,20 +1,17 @@
-import { TanStackDevtools } from "@tanstack/react-devtools";
 import type { QueryClient } from "@tanstack/react-query";
 import {
 	createRootRouteWithContext,
 	HeadContent,
 	Scripts,
 	useRouterState,
 } from "@tanstack/react-router";
-import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
-import { useId } from "react";
+import { type ReactNode, useEffect, useId, useState } from "react";
 import Footer from "@/components/Footer";
 import { buildPageHead, SITE_DESCRIPTION } from "@/lib/site-meta";
 import { buildThemeInitializationScript } from "@/lib/site-theme";
 import { m } from "@/paraglide/messages";
 import { getLocale } from "@/paraglide/runtime";
 import Header from "../components/Header";
-import TanStackQueryDevtools from "../integrations/tanstack-query/devtools";
 import appCss from "../styles.css?url";
 
 interface MyRouterContext {
@@ -23,35 +20,24 @@ interface MyRouterContext {
 
 export const Route = createRootRouteWithContext<MyRouterContext>()({
 	beforeLoad: async () => {
-		// Other redirect strategies are possible; see
-		// https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#offline-redirect
 		if (typeof document !== "undefined") {
 			document.documentElement.setAttribute("lang", getLocale());
 		}
 	},
 
 	head: () => ({
 		meta: [
-			{
-				charSet: "utf-8",
-			},
-			{
-				name: "viewport",
-				content: "width=device-width, initial-scale=1",
-			},
-			{
-				name: "theme-color",
-				content: "#111827",
-			},
+			{ charSet: "utf-8" },
+			{ name: "viewport", content: "width=device-width, initial-scale=1" },
+			{ name: "theme-color", content: "#111827" },
 			...buildPageHead({
 				description: SITE_DESCRIPTION,
 			}).meta,
 		],
 		links: [
-			{
-				rel: "stylesheet",
-				href: appCss,
-			},
+			{ rel: "stylesheet", href: appCss },
+			{ rel: "preconnect", href: "https://unpkg.com" },
+			{ rel: "dns-prefetch", href: "https://unpkg.com" },
 		],
 	}),
 
@@ -65,10 +51,12 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 	const pathname = useRouterState({
 		select: (state) => state.location.pathname,
 	});
+	const isLoading = useRouterState({
+		select: (state) => state.isLoading,
+	});
 	const bodyClassName = getRootBodyClassName(pathname);
 	const isEmbedRoute = bodyClassName === "memos-embed-route";
 	const mainContentId = useId();
-	const showDevtools = import.meta.env.DEV;
 
 	return (
 		<html lang={getLocale()}>
@@ -77,6 +65,14 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 				<script>{buildThemeInitializationScript()}</script>
 			</head>
 			<body className={bodyClassName}>
+				{isLoading ? (
+					<div
+						className="fixed top-0 left-0 right-0 z-[60] h-0.5 bg-primary/30"
+						aria-hidden="true"
+					>
+						<div className="h-full animate-[loading-bar_1.5s_ease-in-out_infinite] bg-primary" />
+					</div>
+				) : null}
 				<a
 					href={`#${mainContentId}`}
 					className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[60] focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground"
@@ -91,22 +87,42 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 					{children}
 				</main>
 				{isEmbedRoute ? null : <Footer />}
-				{showDevtools ? (
-					<TanStackDevtools
-						config={{
-							position: "bottom-right",
-						}}
-						plugins={[
-							{
-								name: "Tanstack Router",
-								render: <TanStackRouterDevtoolsPanel />,
-							},
-							TanStackQueryDevtools,
-						]}
-					/>
-				) : null}
+				{import.meta.env.DEV ? <DevToolsHost /> : null}
 				<Scripts />
 			</body>
 		</html>
 	);
 }
+
+function DevToolsHost() {
+	const [plugins, setPlugins] = useState<ReactNode[] | null>(null);
+
+	useEffect(() => {
+		Promise.all([
+			import("@tanstack/react-devtools"),
+			import("@tanstack/react-router-devtools"),
+			import("../integrations/tanstack-query/devtools"),
+		]).then(([devtoolsMod, routerMod, queryMod]) => {
+			const TanStackDevtools = devtoolsMod.TanStackDevtools;
+			const TanStackRouterDevtoolsPanel = routerMod.TanStackRouterDevtoolsPanel;
+			const TanStackQueryDevtools = queryMod.default;
+
+			setPlugins([
+				<TanStackDevtools
+					key="devtools"
+					config={{ position: "bottom-right" }}
+					plugins={[
+						{
+							name: "Tanstack Router",
+							render: <TanStackRouterDevtoolsPanel />,
+						},
+						TanStackQueryDevtools,
+					]}
+				/>,
+			]);
+		});
+	}, []);
+
+	if (!plugins) return null;
+	return <>{plugins}</>;
+}