AutoGPT 前端性能实践用 next/dynamic 按需加载重型组件【免费下载链接】AutoGPTAutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mission is to provide the tools, so that you can focus on what matters.项目地址: https://gitcode.com/GitHub_Trending/au/AutoGPT本篇围绕 AutoGPT 仓库内置的 Vercel React 最佳实践规则bundle-dynamic-importsHeavy Components 动态导入展开说明为什么静态引入大型组件会拖垮首屏、如何用next/dynamic将其拆分为按需加载的独立 chunk并结合 AutoGPT 平台前端Next.js 15.5.21中 Copilot、分享页、管理后台等模块的真实代码展示该规则在生产代码中的落地方式、ssr: false的适用条件与测试注意事项。规则出处与优先级定位该规则完整定义在 bundle-dynamic-imports.md其 frontmatter 元数据如下字段值含义titleDynamic Imports for Heavy Components针对重型组件的动态导入impactCRITICAL最高影响等级impactDescriptiondirectly affects TTI and LCP直接影响 Time To Interactive 与 Largest Contentful Painttagsbundle, dynamic-import, code-splitting, next-dynamic打包优化 / 代码分割 / next/dynamic在所属技能 SKILL.md 中该规则归入 “Bundle Size Optimization”包体积优化类别与async-*的消除瀑布流规则并列为两大 CRITICAL 优先级45 条规则分 8 个类别按影响度排序。其一句话原则是Usenext/dynamicto lazy-load large components not needed on initial render.用next/dynamic懒加载那些首屏渲染用不到的大型组件。完整的展开版文档见 AGENTS.md 中的 “2.4 Dynamic Imports for Heavy Components” 小节与本规则文件内容一致。核心手法静态导入 vs next/dynamic反模式重型组件进主 chunk原文档给出的错误示例是静态导入 Monaco 编辑器——它会随主 chunk 一起打包文档标注约 300KB即使用户根本用不到代码编辑功能也必须在首屏下载并解析import { MonacoEditor } from ./monaco-editor function CodePanel({ code }: { code: string }) { return MonacoEditor value{code} / }问题在于打包器会沿静态import语句做模块图展开monaco-editor的全部依赖被算入主入口模块直接推高首包体积、拖慢 TTI 与 LCP——这正是该规则被标记为 CRITICAL 的原因。正解dynamic 拆分 按需加载原文档给出的正确写法使用next/dynamicimport dynamic from next/dynamic const MonacoEditor dynamic( () import(./monaco-editor).then(m m.MonacoEditor), { ssr: false } ) function CodePanel({ code }: { code: string }) { return MonacoEditor value{code} / }这里有两个关键细节AutoGPT 前端的真实代码全部遵循同一模式import(...)动态导入webpack/Turbopack 遇到动态import会在该边界处切分出一个独立 chunk只有当MonacoEditor /真正挂载、chunk 请求触发时这部分 JS 才下载执行。.then(m m.X)提取命名导出dynamic()默认渲染模块的 default 导出。AutoGPT 中被拆分的组件如ArtifactPanel、ContextPanel都是命名导出必须通过.then(m m.X)显式取出。ssr: false选项禁用服务端渲染该组件。对纯浏览器环境组件依赖window、Canvas、WebGL 等服务端渲染要么报错要么浪费产物体积ssr: false让该 chunk 仅在客户端水合后加载。AutoGPT 前端中的真实落地仓库中next/dynamic的使用集中在 autogpt_platform/frontend/src 下以下逐一分析。1. 开发工具AgentationDevtoolAgentationDevtool.tsx 是一个 12 行的完整示例与原文档的 Monaco 示例结构完全一致use client; import dynamic from next/dynamic; const Agentation dynamic( () import(agentation).then((mod) mod.Agentation), { ssr: false }, ); export default function AgentationDevtool() { return Agentation /; }第三方库agentation本身体积不小但它只是开发辅助工具绝不该进入任何用户都会下载的主 bundle——动态导入后它成为独立 chunk且ssr: false保证服务端完全不触碰它。2. Copilot 页面ArtifactPanel 与 ContextPanelCopilotPage.tsx/copilot/CopilotPage.tsx#L27-L41) 对两个面板组件都做了动态化const ArtifactPanel dynamic( () import(./components/ArtifactPanel/ArtifactPanel).then( (m) m.ArtifactPanel, ), { ssr: false }, ); const ContextPanel dynamic( () import(./components/ContextPanel/ContextPanel).then( (m) m.ContextPanel, ), { ssr: false }, );这两个面板分别承载“AI 产物如 Markdown 文件预览”和“上下文管理”内部依赖了文件树渲染、Markdown 解析等较重的子依赖。将它们从 Copilot 主页面拆出后用户进入 Copilot 首屏只需加载聊天主体面板在其实际出现时才拉取对应 chunk。3. 分享页面向“可能从不打开面板”的公开访问者分享会话页 share/chat/[token]/page.tsx 复用同一个ArtifactPanel源码注释直接点明了规则动机// out of the initial bundle for public viewers who may never open // one. Mirrors the owner CopilotPage. const ArtifactPanel dynamic( () import( /app/(platform)/copilot/components/ArtifactPanel/ArtifactPanel ).then((m) m.ArtifactPanel), { ssr: false }, );这段注释正是bundle-dynamic-imports规则的精髓落地公开分享页的访问者很可能只看消息、从不点开产物面板静态导入会让所有人白白支付这部分下载成本。公开导览页 TourCopilot.tsx/tour/chat/TourCopilot.tsx#L18-L24) 也采用相同写法保证演示路径复用面板组件但不推高公开页首包。4. 管理后台依赖浏览器 API 的图引擎GraphCanvas.tsx/admin/memory/components/GraphCanvas.tsx#L8-L15) 展示了ssr: false最典型的适用场景并附带了 loading 回退 UI// react-force-graph-2d uses HTMLCanvas window APIs at import time, so it // cant run during Nexts server rendering pass. const ForceGraph2D dynamic(() import(react-force-graph-2d), { ssr: false, loading: () ( div classNameflex h-full items-center justify-center text-sm text-gray-500 Loading graph engine… /div ), });注释明确说明react-force-graph-2d在 import 阶段就使用HTMLCanvas与windowAPI无法在 Next 的服务端渲染通道中执行——这类组件必须ssr: false。此处同时用了loading选项在异步 chunk 尚未加载完成时渲染一个居中的占位提示避免重依赖组件异步化后出现“空白闪屏”。这是对原文档最小示例的一个重要实战补充动态导入组件体积越大、chunk 拉取越慢越应该提供loading回退。关键选项与配套规则next/dynamic 常用选项结合上述仓库实例dynamic()第二个参数对象在 AutoGPT 中实际用到的选项为选项取值作用ssrfalse跳过服务端渲染chunk 仅客户端加载适用于依赖window/Canvas 等浏览器 API 的组件loading返回 JSX 的函数chunk 加载中渲染的占位内容见 GraphCanvas 的 “Loading graph engine…”注意ssr: false是“该组件不参与 SSR”而非整页关闭 SSR所在页面其余部分仍可正常服务端渲染。与同族规则的配合bundle-dynamic-imports并非孤立存在SKILL.md 的包体优化类别中与它形成互补的还有延迟第三方库bundle-defer-third-party.md分析/日志等不阻塞交互的库同样用dynamicssr: false移到水合之后加载写法与本文示例同源按用户意图预加载见 AGENTS.md “2.5 Preload Based on User Intent”动态导入以感知延迟为代价换取首包瘦身补偿手段是在 hover/focus 等意图信号出现时提前void import(./monaco-editor)触发 chunk 下载使面板真正打开时已就绪。两条规则合起来即“平时不加载、要用时提前拉”。测试注意动态 chunk 与定时器动态导入在测试环境有一个容易踩的坑仓库测试中有明确注释。app-shell.test.tsx/tour/chat/tests/app-shell.test.tsx#L125-L132) 写道The next/dynamic ArtifactPanel chunk cant finish loading once timers are faked.在 fake timers 下next/dynamic 的 ArtifactPanel chunk 无法完成加载。因此该测试先在真实定时器下预先openArtifact强制懒加载 chunk 实际挂载再切回 fake timers 运行脚本化演示。启示是用 Vitest/Jest 的 fake timers 时涉及next/dynamic的组件需要在真实定时器阶段完成首挂否则断言会因 chunk 永远“加载中”而失败。适用前提与验证方式本实践适用于 AutoGPT 平台前端package.json 中next版本为 15.5.21next/dynamic自 App Router 起仍可用与 Pages Router 行为一致。该前端构建配置见 next.config.mjs生产构建限制了 webpack 并行度experimental.cpus: 2以降低峰值内存chunk 切分本身由打包器依据动态import边界自动生成。验证手段执行pnpm build即next build后查看输出的 chunk 清单确认被dynamic包裹的组件ArtifactPanel、react-force-graph-2d、agentation等不再出现在首屏必需的共享 chunk 中而是独立 chunk再结合浏览器 Network 面板确认这些 chunk 仅在对应组件挂载时才发起请求。小结bundle-dynamic-imports规则的核心判断标准只有一条组件是否在首屏渲染路径上。不是如产物面板、开发工具、图引擎、分析库就用next/dynamic 动态import()ssr: false拆出独立 chunk体积大时补loading回退并在有交互意图的时机用裸import()预加载补偿延迟。AutoGPT 前端在 Copilot 页、公开分享页、导览页和管理后台中的五处实践完整覆盖了一个重型组件从“静态引入拖累主包”到“按需加载、水合后渲染、意图预取”的标准链路可作为 Next.js 应用包体优化的直接参照。【免费下载链接】AutoGPTAutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mission is to provide the tools, so that you can focus on what matters.项目地址: https://gitcode.com/GitHub_Trending/au/AutoGPT创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 AutoGPT 前端性能实践：用 next/dynamic 按需加载重型组件
AutoGPT 前端性能实践用 next/dynamic 按需加载重型组件【免费下载链接】AutoGPTAutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mission is to provide the tools, so that you can focus on what matters.项目地址: https://gitcode.com/GitHub_Trending/au/AutoGPT本篇围绕 AutoGPT 仓库内置的 Vercel React 最佳实践规则bundle-dynamic-importsHeavy Components 动态导入展开说明为什么静态引入大型组件会拖垮首屏、如何用next/dynamic将其拆分为按需加载的独立 chunk并结合 AutoGPT 平台前端Next.js 15.5.21中 Copilot、分享页、管理后台等模块的真实代码展示该规则在生产代码中的落地方式、ssr: false的适用条件与测试注意事项。规则出处与优先级定位该规则完整定义在 bundle-dynamic-imports.md其 frontmatter 元数据如下字段值含义titleDynamic Imports for Heavy Components针对重型组件的动态导入impactCRITICAL最高影响等级impactDescriptiondirectly affects TTI and LCP直接影响 Time To Interactive 与 Largest Contentful Painttagsbundle, dynamic-import, code-splitting, next-dynamic打包优化 / 代码分割 / next/dynamic在所属技能 SKILL.md 中该规则归入 “Bundle Size Optimization”包体积优化类别与async-*的消除瀑布流规则并列为两大 CRITICAL 优先级45 条规则分 8 个类别按影响度排序。其一句话原则是Usenext/dynamicto lazy-load large components not needed on initial render.用next/dynamic懒加载那些首屏渲染用不到的大型组件。完整的展开版文档见 AGENTS.md 中的 “2.4 Dynamic Imports for Heavy Components” 小节与本规则文件内容一致。核心手法静态导入 vs next/dynamic反模式重型组件进主 chunk原文档给出的错误示例是静态导入 Monaco 编辑器——它会随主 chunk 一起打包文档标注约 300KB即使用户根本用不到代码编辑功能也必须在首屏下载并解析import { MonacoEditor } from ./monaco-editor function CodePanel({ code }: { code: string }) { return MonacoEditor value{code} / }问题在于打包器会沿静态import语句做模块图展开monaco-editor的全部依赖被算入主入口模块直接推高首包体积、拖慢 TTI 与 LCP——这正是该规则被标记为 CRITICAL 的原因。正解dynamic 拆分 按需加载原文档给出的正确写法使用next/dynamicimport dynamic from next/dynamic const MonacoEditor dynamic( () import(./monaco-editor).then(m m.MonacoEditor), { ssr: false } ) function CodePanel({ code }: { code: string }) { return MonacoEditor value{code} / }这里有两个关键细节AutoGPT 前端的真实代码全部遵循同一模式import(...)动态导入webpack/Turbopack 遇到动态import会在该边界处切分出一个独立 chunk只有当MonacoEditor /真正挂载、chunk 请求触发时这部分 JS 才下载执行。.then(m m.X)提取命名导出dynamic()默认渲染模块的 default 导出。AutoGPT 中被拆分的组件如ArtifactPanel、ContextPanel都是命名导出必须通过.then(m m.X)显式取出。ssr: false选项禁用服务端渲染该组件。对纯浏览器环境组件依赖window、Canvas、WebGL 等服务端渲染要么报错要么浪费产物体积ssr: false让该 chunk 仅在客户端水合后加载。AutoGPT 前端中的真实落地仓库中next/dynamic的使用集中在 autogpt_platform/frontend/src 下以下逐一分析。1. 开发工具AgentationDevtoolAgentationDevtool.tsx 是一个 12 行的完整示例与原文档的 Monaco 示例结构完全一致use client; import dynamic from next/dynamic; const Agentation dynamic( () import(agentation).then((mod) mod.Agentation), { ssr: false }, ); export default function AgentationDevtool() { return Agentation /; }第三方库agentation本身体积不小但它只是开发辅助工具绝不该进入任何用户都会下载的主 bundle——动态导入后它成为独立 chunk且ssr: false保证服务端完全不触碰它。2. Copilot 页面ArtifactPanel 与 ContextPanelCopilotPage.tsx/copilot/CopilotPage.tsx#L27-L41) 对两个面板组件都做了动态化const ArtifactPanel dynamic( () import(./components/ArtifactPanel/ArtifactPanel).then( (m) m.ArtifactPanel, ), { ssr: false }, ); const ContextPanel dynamic( () import(./components/ContextPanel/ContextPanel).then( (m) m.ContextPanel, ), { ssr: false }, );这两个面板分别承载“AI 产物如 Markdown 文件预览”和“上下文管理”内部依赖了文件树渲染、Markdown 解析等较重的子依赖。将它们从 Copilot 主页面拆出后用户进入 Copilot 首屏只需加载聊天主体面板在其实际出现时才拉取对应 chunk。3. 分享页面向“可能从不打开面板”的公开访问者分享会话页 share/chat/[token]/page.tsx 复用同一个ArtifactPanel源码注释直接点明了规则动机// out of the initial bundle for public viewers who may never open // one. Mirrors the owner CopilotPage. const ArtifactPanel dynamic( () import( /app/(platform)/copilot/components/ArtifactPanel/ArtifactPanel ).then((m) m.ArtifactPanel), { ssr: false }, );这段注释正是bundle-dynamic-imports规则的精髓落地公开分享页的访问者很可能只看消息、从不点开产物面板静态导入会让所有人白白支付这部分下载成本。公开导览页 TourCopilot.tsx/tour/chat/TourCopilot.tsx#L18-L24) 也采用相同写法保证演示路径复用面板组件但不推高公开页首包。4. 管理后台依赖浏览器 API 的图引擎GraphCanvas.tsx/admin/memory/components/GraphCanvas.tsx#L8-L15) 展示了ssr: false最典型的适用场景并附带了 loading 回退 UI// react-force-graph-2d uses HTMLCanvas window APIs at import time, so it // cant run during Nexts server rendering pass. const ForceGraph2D dynamic(() import(react-force-graph-2d), { ssr: false, loading: () ( div classNameflex h-full items-center justify-center text-sm text-gray-500 Loading graph engine… /div ), });注释明确说明react-force-graph-2d在 import 阶段就使用HTMLCanvas与windowAPI无法在 Next 的服务端渲染通道中执行——这类组件必须ssr: false。此处同时用了loading选项在异步 chunk 尚未加载完成时渲染一个居中的占位提示避免重依赖组件异步化后出现“空白闪屏”。这是对原文档最小示例的一个重要实战补充动态导入组件体积越大、chunk 拉取越慢越应该提供loading回退。关键选项与配套规则next/dynamic 常用选项结合上述仓库实例dynamic()第二个参数对象在 AutoGPT 中实际用到的选项为选项取值作用ssrfalse跳过服务端渲染chunk 仅客户端加载适用于依赖window/Canvas 等浏览器 API 的组件loading返回 JSX 的函数chunk 加载中渲染的占位内容见 GraphCanvas 的 “Loading graph engine…”注意ssr: false是“该组件不参与 SSR”而非整页关闭 SSR所在页面其余部分仍可正常服务端渲染。与同族规则的配合bundle-dynamic-imports并非孤立存在SKILL.md 的包体优化类别中与它形成互补的还有延迟第三方库bundle-defer-third-party.md分析/日志等不阻塞交互的库同样用dynamicssr: false移到水合之后加载写法与本文示例同源按用户意图预加载见 AGENTS.md “2.5 Preload Based on User Intent”动态导入以感知延迟为代价换取首包瘦身补偿手段是在 hover/focus 等意图信号出现时提前void import(./monaco-editor)触发 chunk 下载使面板真正打开时已就绪。两条规则合起来即“平时不加载、要用时提前拉”。测试注意动态 chunk 与定时器动态导入在测试环境有一个容易踩的坑仓库测试中有明确注释。app-shell.test.tsx/tour/chat/tests/app-shell.test.tsx#L125-L132) 写道The next/dynamic ArtifactPanel chunk cant finish loading once timers are faked.在 fake timers 下next/dynamic 的 ArtifactPanel chunk 无法完成加载。因此该测试先在真实定时器下预先openArtifact强制懒加载 chunk 实际挂载再切回 fake timers 运行脚本化演示。启示是用 Vitest/Jest 的 fake timers 时涉及next/dynamic的组件需要在真实定时器阶段完成首挂否则断言会因 chunk 永远“加载中”而失败。适用前提与验证方式本实践适用于 AutoGPT 平台前端package.json 中next版本为 15.5.21next/dynamic自 App Router 起仍可用与 Pages Router 行为一致。该前端构建配置见 next.config.mjs生产构建限制了 webpack 并行度experimental.cpus: 2以降低峰值内存chunk 切分本身由打包器依据动态import边界自动生成。验证手段执行pnpm build即next build后查看输出的 chunk 清单确认被dynamic包裹的组件ArtifactPanel、react-force-graph-2d、agentation等不再出现在首屏必需的共享 chunk 中而是独立 chunk再结合浏览器 Network 面板确认这些 chunk 仅在对应组件挂载时才发起请求。小结bundle-dynamic-imports规则的核心判断标准只有一条组件是否在首屏渲染路径上。不是如产物面板、开发工具、图引擎、分析库就用next/dynamic 动态import()ssr: false拆出独立 chunk体积大时补loading回退并在有交互意图的时机用裸import()预加载补偿延迟。AutoGPT 前端在 Copilot 页、公开分享页、导览页和管理后台中的五处实践完整覆盖了一个重型组件从“静态引入拖累主包”到“按需加载、水合后渲染、意图预取”的标准链路可作为 Next.js 应用包体优化的直接参照。【免费下载链接】AutoGPTAutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mission is to provide the tools, so that you can focus on what matters.项目地址: https://gitcode.com/GitHub_Trending/au/AutoGPT创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考