【免费下载链接】open-slideA slide framework built for agents.项目地址https://gitcode.com/gh_mirrors/op/open-slide点击查看免费下载导读本文基于本仓库内置的 Vercel React Best Practices 技能包中的 bundle-dynamic-imports 规则讲解如何在 Next.js 应用中用next/dynamic对首屏不需要的重型组件如代码编辑器、富文本编辑器、图表库等进行按需加载。读完本文你将掌握动态导入的两种写法与适用场景、ssr: false的正确使用边界以及它与预加载、条件加载、第三方脚本延后等兄弟规则如何配合系统性降低首屏 Bundle 体积从而直接改善 TTITime to Interactive与 LCPLargest Contentful Paint。规则定位为什么它被标记为 CRITICAL在 Vercel React Best Practices 这套为 Agent 和 LLM 编写的 70 条性能规则中本规则属于第 2 大类Bundle Size Optimizationbundle 前缀impact: CRITICAL。规则文件头部元数据明确标注impact: CRITICALimpactDescription: directly affects TTI and LCPtags: bundle, dynamic-import, code-splitting, next-dynamic也就是说这条规则与async-消除瀑布流共同被列为最高优先级。原因是初始 Bundle 体积直接决定用户多久能完成交互TTI与首屏最大内容何时呈现LCP。浏览器必须下载、解析、编译全部 JavaScript 才能渲染出可交互页面而重型组件的代码往往是主 Bundle 中体积最大的部分。把首屏不需要的组件拆出去按需加载是收益最高、成本最低的优化手段之一。关于规则文件的结构规范可参见技能包的 README 与 _template.md每条规则由 frontmattertitle / impact / impactDescription / tags、错误示例、正确示例和补充说明组成构建脚本会自动按前缀归类并生成最终汇总文档。错误示范重型组件打进主 Chunk规则文件给出的反面示例是直接静态导入重型组件import { MonacoEditor } from ./monaco-editor function CodePanel({ code }: { code: string }) { return MonacoEditor value{code} / }问题在于静态 import 属于顶层导入构建工具如 webpack / Turbopack会把它无条件打包进入口 Chunk。如果MonacoEditor是一个体积巨大的编辑器组件示例注明 Monaco 随主 Chunk 打包时约增加300KB那么即使用户只是浏览页面、根本不会打开编辑器这 300KB 的代码也必须在首屏被完整下载、解析和执行。从源码结构看这类问题尤其容易出现在工具型组件上它们功能强大、依赖众多但实际使用频率低如编辑器、PPT 导入导出面板、图表渲染器。在类似本仓库这种为 Agent 构建幻灯片框架的场景中如果编辑器或预览面板体积可观就应优先用动态导入隔离而不是让它们拖慢每一次页面加载。正确示范用 next/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} / }逐行拆解这段代码的含义import dynamic from next/dynamic引入 Next.js 内置的动态导入封装。它基于 React.lazy 实现并额外提供了ssr、loading、ssr等配置项与命名导出映射能力。() import(./monaco-editor)返回一个 Promise 的工厂函数。webpack/Turbopack 看到这种写法会自动把monaco-editor及其依赖切分为独立的异步 Chunk仅在组件真正渲染时才加载。.then(m m.MonacoEditor)将模块对象映射为命名导出。因为dynamic()默认期望模块的默认导出export default如果源文件是命名导出export { MonacoEditor }就必须用.then()显式转换对于export default的组件直接写() import(./monaco-editor)即可。{ ssr: false }禁止服务端渲染该组件。编辑器类组件通常依赖window/document等浏览器 API在 SSR 阶段渲染会报错或产出无意义的 HTML关闭 SSR 后该组件只在客户端挂载时加载同时还能进一步缩小服务端产物。注意边界ssr: false会带来短暂的水合空白且该组件无法被服务端预渲染因此只适用于真正客户端专用、且不参与 SEO 的场景如果组件需要 SSR 或对首屏可见应省略该选项并配合loading占位。从本仓库的技能包结构可以推断同一bundle-大类下还有一系列配套规则供你在不同场景组合使用bundle-preload.md基于用户意图预加载。动态导入解决了首屏不该加载但也引入了用到时才下载的延迟。该规则建议在按钮onMouseEnter/onFocus时提前void import(./monaco-editor)或在功能开关启用时预加载从而把感知延迟降到最低。注意其中的typeof window ! undefined守卫可防止预加载模块被 SSR 打包。bundle-conditional.md条件加载。仅在功能真正被激活时才import()大型数据或模块如动画帧数据加载失败时优雅降级.catch(() setEnabled(false))。bundle-barrel-imports.md避免 barrel 文件导致宽泛打包。bundle-defer-third-party.md将分析、日志等第三方脚本延后到水合之后。组合拳的典型形态是首屏静态导入 → 重型组件用next/dynamic拆出 → 在交互意图hover/focus时预加载 → 功能未启用时完全不加载三步分别对应本规则、预加载规则与条件加载规则。应用决策哪些组件应该动态导入结合规则中的重型组件heavy components与首屏不需要not needed on initial render两个关键词可以给出可操作的判断清单体积大编辑器Monaco、CodeMirror、富文本编辑器、大型图表库、PDF/PPT 解析渲染器、代码高亮引擎等低频使用模态框、抽屉、设置面板、导出向导等默认关闭的交互区域依赖浏览器 API依赖window、document、Canvas/WebGL 的组件通常还需配合ssr: false按路由拆分仅在部分页面使用的整块功能可考虑在路由层面用next/dynamic拆分页面级组件。反之以下情况不应滥用动态导入首屏立即可见的组件、体积很小的组件拆分带来的额外请求开销可能超过收益、以及需要被搜索引擎索引的内容ssr: false会使其无法被 SSR 预渲染。可验证的落地路径规则原文bundle-dynamic-imports.md技能包总览与使用方式SKILL.md含 8 大类规则的完整 Quick Reference 与按场景触发的建议规则模板与元数据约定README.md、_template.md、_sections.md在项目内落地时建议遵循规则文件自身的模板约定明确标注影响等级CRITICAL / HIGH / MEDIUM / LOW与影响描述同时给出错误/正确成对示例便于 Agent 在代码审查与重构中快速对照执行。审查你自己的代码时可以先用构建分析工具确认主 Chunk 中是否存在明显异常的大模块再对照本规则逐一评估是否应拆分为动态导入。赞分享【免费下载链接】open-slideA slide framework built for agents.项目地址https://gitcode.com/gh_mirrors/op/open-slide点击查看免费下载相关推荐cal.diy 前端性能优化用 next/dynamic 对重型组件实施动态导入cal.diy 前端性能优化用 next/dynamic 对重型组件实施动态导入 在 cal.diy 的 web 应用中任何首屏页面都会加载大量 React后端前端企业应用OpenMetadata 前端性能实践用 next/dynamic 动态导入重型组件优化 TTI 与 LCPOpenMetadata 前端性能实践用 next/dynamic 动态导入重型组件优化 TTI 与 LCP 导读 本文聚焦 OpenMetadata 仓库物联网嵌入式Polar 前端性能实践用 next/dynamic 对重组件做动态导入守住 TTI 与 LCPPolar 前端性能实践用 next/dynamic 对重组件做动态导入守住 TTI 与 LCP 本指南以仓库内 Vercel 工程实践规则 bundle后端前端金融科技上一篇Next.js 仓库 CI 失败本地复现指南模式、环境变量与日志分析实战下一篇Milvus 2.0 Index Service 深度解析IndexCoord 与 IndexNode 接口、任务调度与索引状态机创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
open-slide 前端性能实践：使用 next/dynamic 对重型组件实施动态导入与代码分割
【免费下载链接】open-slideA slide framework built for agents.项目地址https://gitcode.com/gh_mirrors/op/open-slide点击查看免费下载导读本文基于本仓库内置的 Vercel React Best Practices 技能包中的 bundle-dynamic-imports 规则讲解如何在 Next.js 应用中用next/dynamic对首屏不需要的重型组件如代码编辑器、富文本编辑器、图表库等进行按需加载。读完本文你将掌握动态导入的两种写法与适用场景、ssr: false的正确使用边界以及它与预加载、条件加载、第三方脚本延后等兄弟规则如何配合系统性降低首屏 Bundle 体积从而直接改善 TTITime to Interactive与 LCPLargest Contentful Paint。规则定位为什么它被标记为 CRITICAL在 Vercel React Best Practices 这套为 Agent 和 LLM 编写的 70 条性能规则中本规则属于第 2 大类Bundle Size Optimizationbundle 前缀impact: CRITICAL。规则文件头部元数据明确标注impact: CRITICALimpactDescription: directly affects TTI and LCPtags: bundle, dynamic-import, code-splitting, next-dynamic也就是说这条规则与async-消除瀑布流共同被列为最高优先级。原因是初始 Bundle 体积直接决定用户多久能完成交互TTI与首屏最大内容何时呈现LCP。浏览器必须下载、解析、编译全部 JavaScript 才能渲染出可交互页面而重型组件的代码往往是主 Bundle 中体积最大的部分。把首屏不需要的组件拆出去按需加载是收益最高、成本最低的优化手段之一。关于规则文件的结构规范可参见技能包的 README 与 _template.md每条规则由 frontmattertitle / impact / impactDescription / tags、错误示例、正确示例和补充说明组成构建脚本会自动按前缀归类并生成最终汇总文档。错误示范重型组件打进主 Chunk规则文件给出的反面示例是直接静态导入重型组件import { MonacoEditor } from ./monaco-editor function CodePanel({ code }: { code: string }) { return MonacoEditor value{code} / }问题在于静态 import 属于顶层导入构建工具如 webpack / Turbopack会把它无条件打包进入口 Chunk。如果MonacoEditor是一个体积巨大的编辑器组件示例注明 Monaco 随主 Chunk 打包时约增加300KB那么即使用户只是浏览页面、根本不会打开编辑器这 300KB 的代码也必须在首屏被完整下载、解析和执行。从源码结构看这类问题尤其容易出现在工具型组件上它们功能强大、依赖众多但实际使用频率低如编辑器、PPT 导入导出面板、图表渲染器。在类似本仓库这种为 Agent 构建幻灯片框架的场景中如果编辑器或预览面板体积可观就应优先用动态导入隔离而不是让它们拖慢每一次页面加载。正确示范用 next/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} / }逐行拆解这段代码的含义import dynamic from next/dynamic引入 Next.js 内置的动态导入封装。它基于 React.lazy 实现并额外提供了ssr、loading、ssr等配置项与命名导出映射能力。() import(./monaco-editor)返回一个 Promise 的工厂函数。webpack/Turbopack 看到这种写法会自动把monaco-editor及其依赖切分为独立的异步 Chunk仅在组件真正渲染时才加载。.then(m m.MonacoEditor)将模块对象映射为命名导出。因为dynamic()默认期望模块的默认导出export default如果源文件是命名导出export { MonacoEditor }就必须用.then()显式转换对于export default的组件直接写() import(./monaco-editor)即可。{ ssr: false }禁止服务端渲染该组件。编辑器类组件通常依赖window/document等浏览器 API在 SSR 阶段渲染会报错或产出无意义的 HTML关闭 SSR 后该组件只在客户端挂载时加载同时还能进一步缩小服务端产物。注意边界ssr: false会带来短暂的水合空白且该组件无法被服务端预渲染因此只适用于真正客户端专用、且不参与 SEO 的场景如果组件需要 SSR 或对首屏可见应省略该选项并配合loading占位。从本仓库的技能包结构可以推断同一bundle-大类下还有一系列配套规则供你在不同场景组合使用bundle-preload.md基于用户意图预加载。动态导入解决了首屏不该加载但也引入了用到时才下载的延迟。该规则建议在按钮onMouseEnter/onFocus时提前void import(./monaco-editor)或在功能开关启用时预加载从而把感知延迟降到最低。注意其中的typeof window ! undefined守卫可防止预加载模块被 SSR 打包。bundle-conditional.md条件加载。仅在功能真正被激活时才import()大型数据或模块如动画帧数据加载失败时优雅降级.catch(() setEnabled(false))。bundle-barrel-imports.md避免 barrel 文件导致宽泛打包。bundle-defer-third-party.md将分析、日志等第三方脚本延后到水合之后。组合拳的典型形态是首屏静态导入 → 重型组件用next/dynamic拆出 → 在交互意图hover/focus时预加载 → 功能未启用时完全不加载三步分别对应本规则、预加载规则与条件加载规则。应用决策哪些组件应该动态导入结合规则中的重型组件heavy components与首屏不需要not needed on initial render两个关键词可以给出可操作的判断清单体积大编辑器Monaco、CodeMirror、富文本编辑器、大型图表库、PDF/PPT 解析渲染器、代码高亮引擎等低频使用模态框、抽屉、设置面板、导出向导等默认关闭的交互区域依赖浏览器 API依赖window、document、Canvas/WebGL 的组件通常还需配合ssr: false按路由拆分仅在部分页面使用的整块功能可考虑在路由层面用next/dynamic拆分页面级组件。反之以下情况不应滥用动态导入首屏立即可见的组件、体积很小的组件拆分带来的额外请求开销可能超过收益、以及需要被搜索引擎索引的内容ssr: false会使其无法被 SSR 预渲染。可验证的落地路径规则原文bundle-dynamic-imports.md技能包总览与使用方式SKILL.md含 8 大类规则的完整 Quick Reference 与按场景触发的建议规则模板与元数据约定README.md、_template.md、_sections.md在项目内落地时建议遵循规则文件自身的模板约定明确标注影响等级CRITICAL / HIGH / MEDIUM / LOW与影响描述同时给出错误/正确成对示例便于 Agent 在代码审查与重构中快速对照执行。审查你自己的代码时可以先用构建分析工具确认主 Chunk 中是否存在明显异常的大模块再对照本规则逐一评估是否应拆分为动态导入。赞分享【免费下载链接】open-slideA slide framework built for agents.项目地址https://gitcode.com/gh_mirrors/op/open-slide点击查看免费下载相关推荐cal.diy 前端性能优化用 next/dynamic 对重型组件实施动态导入cal.diy 前端性能优化用 next/dynamic 对重型组件实施动态导入 在 cal.diy 的 web 应用中任何首屏页面都会加载大量 React后端前端企业应用OpenMetadata 前端性能实践用 next/dynamic 动态导入重型组件优化 TTI 与 LCPOpenMetadata 前端性能实践用 next/dynamic 动态导入重型组件优化 TTI 与 LCP 导读 本文聚焦 OpenMetadata 仓库物联网嵌入式Polar 前端性能实践用 next/dynamic 对重组件做动态导入守住 TTI 与 LCPPolar 前端性能实践用 next/dynamic 对重组件做动态导入守住 TTI 与 LCP 本指南以仓库内 Vercel 工程实践规则 bundle后端前端金融科技上一篇Next.js 仓库 CI 失败本地复现指南模式、环境变量与日志分析实战下一篇Milvus 2.0 Index Service 深度解析IndexCoord 与 IndexNode 接口、任务调度与索引状态机创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
