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

[markbang]

Summary

• Route-level code splitting: lazy-load Docs (13 kB), Playground (17 kB), and Embed route components via TanStack Router .lazy.tsx files
• highlight.js (66 kB JS + 2 kB CSS) loaded dynamically only in the embed route, removed from global bundle
• Filled in missing manifest.json name, short_name, and description for PWA install
• Added preconnect/dns-prefetch hints for unpkg.com CDN
• Added top loading bar animation during route transitions
• DevTools panels now dynamic imports (tree-shaken in production)
• Removed unused jsdom and @testing-library/dom dependencies
• Build target set to esnext for smaller modern-browser output

Test plan

• pnpm validate passes (lint + check + test + test:artifacts + build)
• 19 package tests + 21 site tests all pass
• Build produces separate lazy chunks for Docs, Playground, and Embed routes
• hljs CSS chunk only loaded for embed route

🤖 Generated with Claude Code

---

Summary by cubic

Speeds up first load by lazy-loading Docs, Playground, and Embed routes and loading highlight.js only when needed. Also adds a small loading bar during route transitions and improves PWA metadata.

• Performance

  • Route-level code splitting via .lazy.tsx for Docs, Playground, and Embed.
  • Load highlight.js (66 kB JS + 2 kB CSS) only on the embed route; removed from global bundle.
  • DevTools panels now dynamic imports in dev; tree-shaken in production.
  • Added preconnect/dns-prefetch for https://unpkg.com.
  • Build target set to esnext with CSS minification for smaller modern bundles.
  • Removed unused deps: jsdom, @testing-library/dom.

• UX

  • Added a thin top loading bar during route transitions.
  • PWA manifest now includes name, short_name, and description.

^{Written for commit 9d9f196. Summary will update on new commits. Review in cubic}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
memos-embed-site	Ready	Preview, Comment	May 20, 2026 2:20am

[cubic-dev-ai]

1 issue found across 16 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/site/src/routes/playground/index.lazy.tsx">

<violation number="1" location="apps/site/src/routes/playground/index.lazy.tsx:42">
P2: Use the existing `serializePlaygroundState` helper instead of re-serializing each query param inline to avoid logic drift.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[cubic-dev-ai]

P2: Use the existing serializePlaygroundState helper instead of re-serializing each query param inline to avoid logic drift.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/site/src/routes/playground/index.lazy.tsx, line 42:

<comment>Use the existing `serializePlaygroundState` helper instead of re-serializing each query param inline to avoid logic drift.</comment>

<file context>
@@ -0,0 +1,84 @@
+		}
+
+		const url = new URL(window.location.href);
+		url.searchParams.set("baseUrl", state.baseUrl);
+		url.searchParams.set("memoId", state.memoId);
+		url.searchParams.set("theme", state.theme);
</file context>

[markbang]

Superseded by #34 - rebased on latest main with resolved conflicts.