bundle-dynamic-imports

用途

该技能用于解决 Next.js 应用中重型组件拖慢首屏加载的问题。当某个组件体积较大、且在页面初始渲染时并不需要立即出现时，可以借助 next/dynamic 将其改为懒加载，从而把它从主 chunk 中剥离出来，在真正需要时再加载。

主要能力

• 使用 next/dynamic 对组件进行动态导入，实现按需加载。
• 通过 { ssr: false } 选项控制该组件不在服务端渲染。
• 将大型依赖（如 Monaco 编辑器）从主包中分离，避免其随主 chunk 一起下载。

使用方式

技能以对比示例说明正确与错误写法。

错误写法（Monaco 随主 chunk 一起打包，约 300KB）：

import { MonacoEditor } from './monaco-editor'

function CodePanel({ code }: { code: string }) {
  return <MonacoEditor value={code} />
}

正确写法（Monaco 按需加载）：

import dynamic from 'next/dynamic'

const MonacoEditor = dynamic(
  () => import('./monaco-editor').then(m => m.MonacoEditor),
  { ssr: false }
)

function CodePanel({ code }: { code: string }) {
  return ...
}

核心做法是：用 dynamic() 包裹动态 import，并通过 .then(m => m.MonacoEditor) 取出具名导出，同时传入 { ssr: false }。

适用场景

根据技能描述，适用于导入编辑器、图表、富文本编辑器等首屏不需要立即渲染的大型组件。

限制

资料中未提供关于该技能的其他限制、兼容版本、性能收益的具体数值或额外配置说明。