next/dynamic 是 Next.js 提供的动态导入（Lazy Loading）功能，用于按需加载组件，从而减少首屏 JS 体积，提高性能。
🔥 next/dynamic 的作用
✅ 减少初始 JS 体积（代码分割，提高页面加载速度）
✅ 按需加载组件（只有在需要时才下载 JS 代码）
✅ 避免 SSR 渲染不支持的库（如 window 依赖的库）
✅ 支持自定义加载状态（可以显示 Loading 占位符）
🔥 next/dynamic 的基本用法
📌 基础用法
import dynamic from "next/dynamic";
// 组件在客户端加载（不会 SSR）
const HeavyComponent = dynamic(() => import("../components/HeavyComponent"), {
ssr: false, // 关闭 SSR
});
export default function Page() {
return <HeavyComponent />;
}✅ 优化点
HeavyComponent不会被包含在服务器渲染的 HTML 中- 仅在 客户端加载，不会影响 SSR
🔥 1. 懒加载大型组件
📌 适用于图表、地图等大型组件
import dynamic from "next/dynamic";
// 组件按需加载
const Chart = dynamic(() => import("../components/Chart"), {
loading: () => <p>Loading...</p>, // ⏳ 加载时显示占位符
});
export default function Page() {
return <Chart />;
}✅ 优化点
Chart组件不会影响首屏加载- 只有用户访问该页面时才会加载
🔥 2. 关闭 SSR，避免 window 相关错误
📌 某些第三方库（如 mapbox-gl）只在客户端运行
import dynamic from "next/dynamic";
// 关闭 SSR，避免 `window is not defined` 错误
const Map = dynamic(() => import("../components/Map"), { ssr: false });
export default function Page() {
return <Map />;
}✅ 优化点
- 避免
window is not defined错误 - 适用于仅在客户端运行的库
🔥 3. 仅在事件触发时加载
📌 避免不必要的加载
import { useState } from "react";
import dynamic from "next/dynamic";
const HeavyComponent = dynamic(() => import("../components/HeavyComponent"));
export default function Page() {
const [show, setShow] = useState(false);
return (
<div>
<button onClick={() => setShow(true)}>显示组件</button>
{show && <HeavyComponent />}
</div>
);
}✅ 优化点
- 只有用户点击按钮时才加载
HeavyComponent - 减少初始加载时间
🔥 4. dynamic() 配合 import() 进行代码拆分
📌 按需加载模块
async function handleClick() {
const { someFunction } = await import("../utils/heavyFunctions");
someFunction();
}✅ 优化点
- 仅在需要时加载模块
- 避免影响主 JS 体积
🎯 总结
用法 | 适用场景 | 优化点 |
默认动态导入 | 组件懒加载 | ✅ 只在需要时加载 |
SSR 关闭 ( | 依赖 | ✅ 避免 |
自定义加载状态 | 显示 Loading UI | ✅ 提升用户体验 |
事件触发加载 | 用户交互后才加载 | ✅ 减少不必要的 JS |
📌 一句话总结👉 next/dynamic 让 Next.js 组件支持懒加载，减少 JS 体积，优化页面性能！
