From 645a7ceb526d96c126a06939ff0874117e92ca9d Mon Sep 17 00:00:00 2001
From: Simon <10131203+gaomeng1900@users.noreply.github.com>
Date: Tue, 3 Mar 2026 21:38:29 +0800
Subject: [PATCH] feat(website): loading time optimize

---
 packages/website/src/pages/Home.tsx           | 24 +++++++++---
 .../website/src/pages/home/HeroSection.tsx    |  5 ++-
 packages/website/src/router.tsx               | 38 ++++++++-----------
 packages/website/vite.config.js               |  1 -
 4 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/packages/website/src/pages/Home.tsx b/packages/website/src/pages/Home.tsx
index c1741f3..15b6a10 100644
--- a/packages/website/src/pages/Home.tsx
+++ b/packages/website/src/pages/Home.tsx
@@ -1,15 +1,27 @@
-import FeaturesSection from './home/FeaturesSection'
+import { Suspense, lazy } from 'react'
+
 import HeroSection from './home/HeroSection'
-import OneMoreThingSection from './home/OneMoreThingSection'
-import ScenariosSection from './home/ScenariosSection'
+
+const FeaturesSection = lazy(() => import('./home/FeaturesSection'))
+const ScenariosSection = lazy(() => import('./home/ScenariosSection'))
+const OneMoreThingSection = lazy(() => import('./home/OneMoreThingSection'))
 
 export default function HomePage() {
 	return (
 		<>
 			<HeroSection />
-			<FeaturesSection />
-			<ScenariosSection />
-			<OneMoreThingSection />
+			<Suspense
+				fallback={
+					<div className="flex items-center justify-center gap-3 py-20 text-gray-400">
+						<div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+						Loading...
+					</div>
+				}
+			>
+				<FeaturesSection />
+				<ScenariosSection />
+				<OneMoreThingSection />
+			</Suspense>
 		</>
 	)
 }
diff --git a/packages/website/src/pages/home/HeroSection.tsx b/packages/website/src/pages/home/HeroSection.tsx
index 162bdbd..cb565e9 100644
--- a/packages/website/src/pages/home/HeroSection.tsx
+++ b/packages/website/src/pages/home/HeroSection.tsx
@@ -16,7 +16,7 @@ import {
 } from '../../constants'
 import { useLanguage } from '../../i18n/context'
 
-const pageAgentModule = import('page-agent')
+let pageAgentModule: Promise<typeof import('page-agent')> | null = null
 
 function getInjection(useCN?: boolean) {
 	const cdn = useCN ? CDN_DEMO_CN_URL : CDN_DEMO_URL
@@ -59,11 +59,12 @@ export default function HeroSection() {
 
 	const [ready, setReady] = useState(false)
 	useEffect(() => {
+		pageAgentModule ??= import('page-agent')
 		pageAgentModule.then(() => setReady(true))
 	}, [])
 
 	const handleExecute = async () => {
-		if (!task.trim() || !ready) return
+		if (!task.trim() || !ready || !pageAgentModule) return
 
 		const { PageAgent } = await pageAgentModule
 		const win = window as any
diff --git a/packages/website/src/router.tsx b/packages/website/src/router.tsx
index 9ba948a..1e427c2 100644
--- a/packages/website/src/router.tsx
+++ b/packages/website/src/router.tsx
@@ -1,18 +1,12 @@
-import { Suspense, lazy, useLayoutEffect } from 'react'
+import { Suspense, lazy, useEffect, useLayoutEffect } from 'react'
 import { Route, Switch, useLocation } from 'wouter'
 
 import Footer from './components/Footer'
 import Header from './components/Header'
-import { useLanguage } from './i18n/context'
 import HomePage from './pages/Home'
-import DocsLayout from './pages/docs/Layout'
 
-const DocsPages = lazy(() => import('./pages/docs/index'))
-
-// Prefetch docs chunk during idle time so navigation feels instant
-if (typeof requestIdleCallback !== 'undefined') {
-	requestIdleCallback(() => import('./pages/docs/index'))
-}
+const docsImport = () => import('./pages/docs/index')
+const DocsPages = lazy(docsImport)
 
 function ScrollToTop() {
 	const [pathname] = useLocation()
@@ -22,19 +16,12 @@ function ScrollToTop() {
 	return null
 }
 
-function DocsLoadingFallback() {
-	const { isZh } = useLanguage()
-	return (
-		<DocsLayout>
-			<div className="flex items-center gap-3 py-12 text-gray-500 dark:text-gray-400">
-				<div className="w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
-				{isZh ? '文档加载中...' : 'Loading documentation...'}
-			</div>
-		</DocsLayout>
-	)
-}
-
 export default function Router() {
+	useEffect(() => {
+		const id = requestIdleCallback(() => docsImport())
+		return () => cancelIdleCallback(id)
+	}, [])
+
 	return (
 		<div className="flex min-h-screen flex-col">
 			<Header />
@@ -52,7 +39,14 @@ export default function Router() {
 
 					<Route path="/docs" nest>
 						<div className="flex-1 bg-white dark:bg-gray-900">
-							<Suspense fallback={<DocsLoadingFallback />}>
+							<Suspense
+								fallback={
+									<div className="flex items-center justify-center gap-3 py-20 text-gray-400">
+										<div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+										Loading...
+									</div>
+								}
+							>
 								<DocsPages />
 							</Suspense>
 						</div>
diff --git a/packages/website/vite.config.js b/packages/website/vite.config.js
index fc1d514..09683dc 100644
--- a/packages/website/vite.config.js
+++ b/packages/website/vite.config.js
@@ -67,7 +67,6 @@ export default defineConfig(({ mode }) => ({
 			output: {
 				manualChunks: {
 					vendor: ['react', 'react-dom', 'wouter'],
-					'page-agent': ['page-agent'],
 				},
 			},
 		},