mcpField
B
bundle-dynamic-imports

bundle-dynamic-imports

github.com/theorcdev开发2.1k39 次安装2 天前更新
代码仓库

关于 bundle-dynamic-imports

介绍在 Next.js 中使用 next/dynamic 延迟加载大型组件的方法，避免它们进入初始渲染所需的主包。适用于希望按需加载组件的前端开发者。

主要功能

  1. 01通过 next/dynamic 延迟加载组件
  2. 02按需加载大型组件
  3. 03配置组件不进行服务端渲染

适用场景

  1. 01按需加载 Monaco 编辑器
  2. 02减少初始主包中的组件内容

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill bundle-dynamic-imports

安装后在 Claude Code 中输入/bundle-dynamic-imports确认已加载。

详细介绍

大型组件的动态导入

使用 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} />
}

评论

支持 Markdown