面試官：Next.js 中的 next/dynamic 有什么作用？如何使用它
作者：dev
??next/dynamic?? 是 Next.js 提供的動態(tài)導入（Lazy Loading）功能，用于按需加載組件，從而減少首屏 JS 體積，提高性能。
next/dynamic 是 Next.js 提供的動態(tài)導入（Lazy Loading）功能，用于按需加載組件，從而減少首屏 JS 體積，提高性能。
?? next/dynamic 的作用
? 減少初始 JS 體積（代碼分割，提高頁面加載速度）
? 按需加載組件（只有在需要時才下載 JS 代碼）
? 避免 SSR 渲染不支持的庫（如 window 依賴的庫）
? 支持自定義加載狀態(tài)（可以顯示 Loading 占位符）
?? next/dynamic 的基本用法
?? 基礎用法
import dynamic from "next/dynamic";
// 組件在客戶端加載（不會 SSR）
const HeavyComponent = dynamic(() => import("../components/HeavyComponent"), {
ssr: false, // 關閉 SSR
});
export default function Page() {
return <HeavyComponent />;
}? 優(yōu)化點
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 />;
}? 優(yōu)化點
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 />;
}? 優(yōu)化點
- 避免
window is not defined錯誤 - 適用于僅在客戶端運行的庫
?? 3. 僅在事件觸發(fā)時加載
?? 避免不必要的加載
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>
);
}? 優(yōu)化點
- 只有用戶點擊按鈕時才加載
HeavyComponent - 減少初始加載時間
?? 4. dynamic() 配合 import() 進行代碼拆分
?? 按需加載模塊
async function handleClick() {
const { someFunction } = await import("../utils/heavyFunctions");
someFunction();
}? 優(yōu)化點
- 僅在需要時加載模塊
- 避免影響主 JS 體積
?? 總結
用法 | 適用場景 | 優(yōu)化點 |
默認動態(tài)導入 | 組件懶加載 | ? 只在需要時加載 |
SSR 關閉 ( | 依賴 | ? 避免 |
自定義加載狀態(tài) | 顯示 Loading UI | ? 提升用戶體驗 |
事件觸發(fā)加載 | 用戶交互后才加載 | ? 減少不必要的 JS |
?? 一句話總結?? next/dynamic 讓 Next.js 組件支持懶加載，減少 JS 體積，優(yōu)化頁面性能！
責任編輯：武曉燕
來源：
大遷世界
