zoushiyang/page-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(website): optimize bundle size

Browse Source
This commit is contained in:
Simon
2026-01-16 15:05:09 +08:00
parent c8bf0dd20f
commit 41123ac561
3 changed files with 129 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/website/src/pages/Home.tsx
View File

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

219
packages/website/src/router.tsx
View File

@@ -1,148 +1,123 @@
import { Suspense, lazy } from 'react'
import { Route, Switch } from 'wouter' import { Route, Switch } from 'wouter'
import Header from './components/Header' import Header from './components/Header'
import HomePage from './pages/Home'
import DocsLayout from './pages/docs/Layout' import DocsLayout from './pages/docs/Layout'
// Features pages
import Instructions from './pages/docs/features/custom-instructions/page' // Lazy load pages
import CustomTools from './pages/docs/features/custom-tools/page' const HomePage = lazy(() => import('./pages/Home'))
import DataMasking from './pages/docs/features/data-masking/page' // Introduction
import Models from './pages/docs/features/models/page' const Overview = lazy(() => import('./pages/docs/introduction/overview/page'))
// Integration pages const QuickStart = lazy(() => import('./pages/docs/introduction/quick-start/page'))
import BestPractices from './pages/docs/integration/best-practices/page' const Limitations = lazy(() => import('./pages/docs/introduction/limitations/page'))
import CdnSetup from './pages/docs/integration/cdn-setup/page' // Features
import Configuration from './pages/docs/integration/configuration/page' const CustomTools = lazy(() => import('./pages/docs/features/custom-tools/page'))
import SecurityPermissions from './pages/docs/integration/security-permissions/page' const DataMasking = lazy(() => import('./pages/docs/features/data-masking/page'))
import ThirdPartyAgent from './pages/docs/integration/third-party-agent/page' const Instructions = lazy(() => import('./pages/docs/features/custom-instructions/page'))
// Introduction pages const Models = lazy(() => import('./pages/docs/features/models/page'))
import Limitations from './pages/docs/introduction/limitations/page' // Integration
import Overview from './pages/docs/introduction/overview/page' const CdnSetup = lazy(() => import('./pages/docs/integration/cdn-setup/page'))
import QuickStart from './pages/docs/introduction/quick-start/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() { export default function Router() {
return ( return (
<Switch> <Suspense>
{/* Home page */} <Switch>
<Route path="/" component={HomePage} /> {/* Home page */}
<Route path="/">
<HomePage />
</Route>
{/* Documentation pages with layout */} {/* Introduction */}
<Route path="/docs/introduction/overview"> <Route path="/docs/introduction/overview">
<div className="min-h-screen bg-white dark:bg-gray-900"> <DocsPage>
<Header />
<DocsLayout>
<Overview /> <Overview />
</DocsLayout> </DocsPage>
</div> </Route>
</Route> <Route path="/docs/introduction/quick-start">
<DocsPage>
<Route path="/docs/introduction/quick-start">
<div className="min-h-screen bg-white dark:bg-gray-900">
<Header />
<DocsLayout>
<QuickStart /> <QuickStart />
</DocsLayout> </DocsPage>
</div> </Route>
</Route> <Route path="/docs/introduction/limitations">
<DocsPage>
<Route path="/docs/introduction/limitations">
<div className="min-h-screen bg-white dark:bg-gray-900">
<Header />
<DocsLayout>
<Limitations /> <Limitations />
</DocsLayout> </DocsPage>
</div> </Route>
</Route>
<Route path="/docs/features/custom-tools"> {/* Features */}
<div className="min-h-screen bg-white dark:bg-gray-900"> <Route path="/docs/features/custom-tools">
<Header /> <DocsPage>
<DocsLayout>
<CustomTools /> <CustomTools />
</DocsLayout> </DocsPage>
</div> </Route>
</Route> <Route path="/docs/features/data-masking">
<DocsPage>
<Route path="/docs/features/data-masking">
<div className="min-h-screen bg-white dark:bg-gray-900">
<Header />
<DocsLayout>
<DataMasking /> <DataMasking />
</DocsLayout> </DocsPage>
</div> </Route>
</Route> <Route path="/docs/features/custom-instructions">
<DocsPage>
<Route path="/docs/features/custom-instructions">
<div className="min-h-screen bg-white dark:bg-gray-900">
<Header />
<DocsLayout>
<Instructions /> <Instructions />
</DocsLayout> </DocsPage>
</div> </Route>
</Route> <Route path="/docs/features/models">
<DocsPage>
<Route path="/docs/features/models">
<div className="min-h-screen bg-white dark:bg-gray-900">
<Header />
<DocsLayout>
<Models /> <Models />
</DocsLayout> </DocsPage>
</div> </Route>
</Route>
<Route path="/docs/integration/cdn-setup"> {/* Integration */}
<div className="min-h-screen bg-white dark:bg-gray-900"> <Route path="/docs/integration/cdn-setup">
<Header /> <DocsPage>
<DocsLayout>
<CdnSetup /> <CdnSetup />
</DocsLayout> </DocsPage>
</div> </Route>
</Route> <Route path="/docs/integration/security-permissions">
<DocsPage>
<Route path="/docs/integration/security-permissions">
<div className="min-h-screen bg-white dark:bg-gray-900">
<Header />
<DocsLayout>
<SecurityPermissions /> <SecurityPermissions />
</DocsLayout> </DocsPage>
</div> </Route>
</Route> <Route path="/docs/integration/configuration">
<DocsPage>
<Route path="/docs/integration/configuration">
<div className="min-h-screen bg-white dark:bg-gray-900">
<Header />
<DocsLayout>
<Configuration /> <Configuration />
</DocsLayout> </DocsPage>
</div> </Route>
</Route> <Route path="/docs/integration/best-practices">
<DocsPage>
<Route path="/docs/integration/best-practices">
<div className="min-h-screen bg-white dark:bg-gray-900">
<Header />
<DocsLayout>
<BestPractices /> <BestPractices />
</DocsLayout> </DocsPage>
</div> </Route>
</Route> <Route path="/docs/integration/third-party-agent">
<DocsPage>
<Route path="/docs/integration/third-party-agent">
<div className="min-h-screen bg-white dark:bg-gray-900">
<Header />
<DocsLayout>
<ThirdPartyAgent /> <ThirdPartyAgent />
</DocsLayout> </DocsPage>
</div> </Route>
</Route>
{/* 404 page */} {/* 404 */}
<Route> <Route>
<div className="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center"> <div className="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
<div className="text-center"> <div className="text-center">
<h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">404</h1> <h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">404</h1>
<p className="text-xl text-gray-600 dark:text-gray-300">页面未找到</p> <p className="text-xl text-gray-600 dark:text-gray-300">页面未找到</p>
</div>
</div> </div>
</div> </Route>
</Route> </Switch>
</Switch> </Suspense>
) )
} }

28
packages/website/vite.config.js
View File

@@ -21,13 +21,39 @@ export default defineConfig({
clearScreen: false, clearScreen: false,
plugins: [react(), tailwindcss()], plugins: [react(), tailwindcss()],
build: { build: {
chunkSizeWarningLimit: 2000,
cssCodeSplit: true, cssCodeSplit: true,
rollupOptions: { rollupOptions: {
onwarn: function (message, handler) { onwarn: function (message, handler) {
if (message.code === 'EVAL') return if (message.code === 'EVAL') return
handler(message) 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: { resolve: {