chore(website): optimize bundle size

packages/website/src/pages/Home.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react-dom/no-dangerously-set-innerhtml */
 import { Bot, Box, MessageSquare, PlayCircle, Shield, Sparkles, Users, Zap } from 'lucide-react'
-import { PageAgent } from 'page-agent'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, useSearchParams } from 'wouter'
@@ -59,13 +58,12 @@ export default function HomePage() {
 	const handleExecute = async () => {
 		if (!task.trim()) return
 
-		let pageAgent: PageAgent
 		const win = window as any
 
-		if (win.pageAgent && !win.pageAgent.disposed) {
-			pageAgent = win.pageAgent
-		} else {
-			pageAgent = new PageAgent({
+		// Lazy load PageAgent only when user clicks execute
+		if (!win.pageAgent || win.pageAgent.disposed) {
+			const { PageAgent } = await import('page-agent')
+			win.pageAgent = new PageAgent({
 				// 把 react 根元素排除掉，挂了很多冒泡时间导致假阳
 				interactiveBlacklist: [document.getElementById('root')!],
 				language: i18n.language as any,
@@ -92,11 +90,9 @@ export default function HomePage() {
 						? import.meta.env.LLM_API_KEY
 						: DEMO_API_KEY,
 			})
-			win.pageAgent = pageAgent
 		}
 
-		const result = await pageAgent.execute(task)
-
+		const result = await win.pageAgent.execute(task)
 		console.log(result)
 	}
 

packages/website/src/router.tsx

@@ -1,140 +1,114 @@
+import { Suspense, lazy } from 'react'
 import { Route, Switch } from 'wouter'
 
 import Header from './components/Header'
-import HomePage from './pages/Home'
 import DocsLayout from './pages/docs/Layout'
-// Features pages
-import Instructions from './pages/docs/features/custom-instructions/page'
-import CustomTools from './pages/docs/features/custom-tools/page'
-import DataMasking from './pages/docs/features/data-masking/page'
-import Models from './pages/docs/features/models/page'
-// Integration pages
-import BestPractices from './pages/docs/integration/best-practices/page'
-import CdnSetup from './pages/docs/integration/cdn-setup/page'
-import Configuration from './pages/docs/integration/configuration/page'
-import SecurityPermissions from './pages/docs/integration/security-permissions/page'
-import ThirdPartyAgent from './pages/docs/integration/third-party-agent/page'
-// Introduction pages
-import Limitations from './pages/docs/introduction/limitations/page'
-import Overview from './pages/docs/introduction/overview/page'
-import QuickStart from './pages/docs/introduction/quick-start/page'
+
+// Lazy load pages
+const HomePage = lazy(() => import('./pages/Home'))
+// Introduction
+const Overview = lazy(() => import('./pages/docs/introduction/overview/page'))
+const QuickStart = lazy(() => import('./pages/docs/introduction/quick-start/page'))
+const Limitations = lazy(() => import('./pages/docs/introduction/limitations/page'))
+// Features
+const CustomTools = lazy(() => import('./pages/docs/features/custom-tools/page'))
+const DataMasking = lazy(() => import('./pages/docs/features/data-masking/page'))
+const Instructions = lazy(() => import('./pages/docs/features/custom-instructions/page'))
+const Models = lazy(() => import('./pages/docs/features/models/page'))
+// Integration
+const CdnSetup = lazy(() => import('./pages/docs/integration/cdn-setup/page'))
+const SecurityPermissions = lazy(() => import('./pages/docs/integration/security-permissions/page'))
+const Configuration = lazy(() => import('./pages/docs/integration/configuration/page'))
+const BestPractices = lazy(() => import('./pages/docs/integration/best-practices/page'))
+const ThirdPartyAgent = lazy(() => import('./pages/docs/integration/third-party-agent/page'))
+
+function DocsPage({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="min-h-screen bg-white dark:bg-gray-900">
+			<Header />
+			<DocsLayout>
+				<Suspense>{children}</Suspense>
+			</DocsLayout>
+		</div>
+	)
+}
 
 export default function Router() {
 	return (
+		<Suspense>
 			<Switch>
 				{/* Home page */}
-			<Route path="/" component={HomePage} />
+				<Route path="/">
+					<HomePage />
+				</Route>
 
-			{/* Documentation pages with layout */}
+				{/* Introduction */}
 				<Route path="/docs/introduction/overview">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
+					<DocsPage>
 						<Overview />
-					</DocsLayout>
-				</div>
+					</DocsPage>
 				</Route>
-
 				<Route path="/docs/introduction/quick-start">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
+					<DocsPage>
 						<QuickStart />
-					</DocsLayout>
-				</div>
+					</DocsPage>
 				</Route>
-
 				<Route path="/docs/introduction/limitations">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
+					<DocsPage>
 						<Limitations />
-					</DocsLayout>
-				</div>
+					</DocsPage>
 				</Route>
 
+				{/* Features */}
 				<Route path="/docs/features/custom-tools">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
+					<DocsPage>
 						<CustomTools />
-					</DocsLayout>
-				</div>
+					</DocsPage>
 				</Route>
-
 				<Route path="/docs/features/data-masking">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
+					<DocsPage>
 						<DataMasking />
-					</DocsLayout>
-				</div>
+					</DocsPage>
 				</Route>
-
 				<Route path="/docs/features/custom-instructions">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
+					<DocsPage>
 						<Instructions />
-					</DocsLayout>
-				</div>
+					</DocsPage>
 				</Route>
-
 				<Route path="/docs/features/models">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
+					<DocsPage>
 						<Models />
-					</DocsLayout>
-				</div>
+					</DocsPage>
 				</Route>
 
+				{/* Integration */}
 				<Route path="/docs/integration/cdn-setup">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
+					<DocsPage>
 						<CdnSetup />
-					</DocsLayout>
-				</div>
+					</DocsPage>
 				</Route>
-
 				<Route path="/docs/integration/security-permissions">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
+					<DocsPage>
 						<SecurityPermissions />
-					</DocsLayout>
-				</div>
+					</DocsPage>
 				</Route>
-
 				<Route path="/docs/integration/configuration">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
+					<DocsPage>
 						<Configuration />
-					</DocsLayout>
-				</div>
+					</DocsPage>
 				</Route>
-
 				<Route path="/docs/integration/best-practices">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
+					<DocsPage>
 						<BestPractices />
-					</DocsLayout>
-				</div>
+					</DocsPage>
 				</Route>
-
 				<Route path="/docs/integration/third-party-agent">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
+					<DocsPage>
 						<ThirdPartyAgent />
-					</DocsLayout>
-				</div>
+					</DocsPage>
 				</Route>
 
-			{/* 404 page */}
+				{/* 404 */}
 				<Route>
 					<div className="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
 						<div className="text-center">
@@ -144,5 +118,6 @@ export default function Router() {
 					</div>
 				</Route>
 			</Switch>
+		</Suspense>
 	)
 }

packages/website/vite.config.js

@@ -21,13 +21,39 @@ export default defineConfig({
 	clearScreen: false,
 	plugins: [react(), tailwindcss()],
 	build: {
-		chunkSizeWarningLimit: 2000,
 		cssCodeSplit: true,
 		rollupOptions: {
 			onwarn: function (message, handler) {
 				if (message.code === 'EVAL') return
 				handler(message)
 			},
+			output: {
+				manualChunks(id) {
+					// React core
+					if (id.includes('node_modules/react-dom') || id.includes('node_modules/react/')) {
+						return 'react'
+					}
+					// Radix UI
+					if (id.includes('node_modules/@radix-ui')) {
+						return 'radix'
+					}
+					// Motion animation
+					if (id.includes('node_modules/motion')) {
+						return 'motion'
+					}
+					// Icons
+					if (
+						id.includes('node_modules/lucide-react') ||
+						id.includes('node_modules/simple-icons')
+					) {
+						return 'icons'
+					}
+					// i18n
+					if (id.includes('node_modules/i18next') || id.includes('node_modules/react-i18next')) {
+						return 'i18n'
+					}
+				},
+			},
 		},
 	},
 	resolve: {