动态导入懒加载技术Skill bundle-dynamic-imports

这个技能涉及使用 Next.js 框架的 `next/dynamic` 功能实现组件懒加载，以优化网页性能和用户体验。适用于在初始渲染时不需要的大型组件，如代码编辑器、图表、富文本编辑器等。通过动态导入，可以减少初始加载时间，提升应用响应速度。关键词：动态导入、懒加载、Next.js、前端优化、性能提升、组件加载、代码分割。

前端开发 0 次安装 0 次浏览更新于 3/9/2026

name: 动态导入优化 description: 使用 next/dynamic 进行懒加载重组件。适用于导入在初始渲染时不需要的大组件，如编辑器、图表或富文本编辑器。

重组件的动态导入

使用 next/dynamic 来懒加载在初始渲染时不需要的大组件。

不正确 (Monaco 捆绑在主块中，约 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 <MonacoEditor value={code} />
}