From 41123ac561af6321a7110610e10dbebeb8a9d263 Mon Sep 17 00:00:00 2001 From: Simon <10131203+gaomeng1900@users.noreply.github.com> Date: Fri, 16 Jan 2026 15:05:09 +0800 Subject: [PATCH] chore(website): optimize bundle size --- packages/website/src/pages/Home.tsx | 14 +- packages/website/src/router.tsx | 219 ++++++++++++---------------- packages/website/vite.config.js | 28 +++- 3 files changed, 129 insertions(+), 132 deletions(-) diff --git a/packages/website/src/pages/Home.tsx b/packages/website/src/pages/Home.tsx index 5b466c5..c9f129a 100644 --- a/packages/website/src/pages/Home.tsx +++ b/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) } diff --git a/packages/website/src/router.tsx b/packages/website/src/router.tsx index bb45ae3..17c990c 100644 --- a/packages/website/src/router.tsx +++ b/packages/website/src/router.tsx @@ -1,148 +1,123 @@ +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 ( +
+
+ + {children} + +
+ ) +} export default function Router() { return ( - - {/* Home page */} - + + + {/* Home page */} + + + - {/* Documentation pages with layout */} - -
-
- + {/* Introduction */} + + - -
- - - -
-
- + + + + - -
- - - -
-
- + + + + - -
- + + - -
-
- + {/* Features */} + + - -
- - - -
-
- + + + + - -
- - - -
-
- + + + + - -
- - - -
-
- + + + + - -
- + + - -
-
- + {/* Integration */} + + - -
- - - -
-
- + + + + - -
- - - -
-
- + + + + - -
- - - -
-
- + + + + - -
- - - -
-
- + + + + - -
- + + - {/* 404 page */} - -
-
-

404

-

页面未找到

+ {/* 404 */} + +
+
+

404

+

页面未找到

+
-
- - + + + ) } diff --git a/packages/website/vite.config.js b/packages/website/vite.config.js index b6c3651..9a16cf5 100644 --- a/packages/website/vite.config.js +++ b/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: {