面試官：Next.js 中的 next/dynamic 有什么作用？如何使用它
作者：dev
??next/dynamic?? 是 Next.js 提供的動(dòng)態(tài)導(dǎo)入（Lazy Loading）功能，用于按需加載組件，從而減少首屏 JS 體積，提高性能。
next/dynamic 是 Next.js 提供的動(dòng)態(tài)導(dǎo)入（Lazy Loading）功能，用于按需加載組件，從而減少首屏 JS 體積，提高性能。
?? next/dynamic 的作用
? 減少初始 JS 體積（代碼分割，提高頁(yè)面加載速度）
? 按需加載組件（只有在需要時(shí)才下載 JS 代碼）
? 避免 SSR 渲染不支持的庫(kù)（如 window 依賴的庫(kù)）
? 支持自定義加載狀態(tài)（可以顯示 Loading 占位符）
?? next/dynamic 的基本用法
?? 基礎(chǔ)用法
import dynamic from "next/dynamic";
// 組件在客戶端加載（不會(huì) SSR）
const HeavyComponent = dynamic(() => import("../components/HeavyComponent"), {
ssr: false, // 關(guān)閉 SSR
});
export default function Page() {
return <HeavyComponent />;
}? 優(yōu)化點(diǎn)
HeavyComponent不會(huì)被包含在服務(wù)器渲染的 HTML 中- 僅在 客戶端加載，不會(huì)影響 SSR
?? 1. 懶加載大型組件
?? 適用于圖表、地圖等大型組件
import dynamic from "next/dynamic";
// 組件按需加載
const Chart = dynamic(() => import("../components/Chart"), {
loading: () => <p>Loading...</p>, // ? 加載時(shí)顯示占位符
});
export default function Page() {
return <Chart />;
}? 優(yōu)化點(diǎn)
Chart組件不會(huì)影響首屏加載- 只有用戶訪問(wèn)該頁(yè)面時(shí)才會(huì)加載
?? 2. 關(guān)閉 SSR，避免 window 相關(guān)錯(cuò)誤
?? 某些第三方庫(kù)（如 mapbox-gl）只在客戶端運(yùn)行
import dynamic from "next/dynamic";
// 關(guān)閉 SSR，避免 `window is not defined` 錯(cuò)誤
const Map = dynamic(() => import("../components/Map"), { ssr: false });
export default function Page() {
return <Map />;
}? 優(yōu)化點(diǎn)
- 避免
window is not defined錯(cuò)誤 - 適用于僅在客戶端運(yùn)行的庫(kù)
?? 3. 僅在事件觸發(fā)時(shí)加載
?? 避免不必要的加載
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)化點(diǎn)
- 只有用戶點(diǎn)擊按鈕時(shí)才加載
HeavyComponent - 減少初始加載時(shí)間
?? 4. dynamic() 配合 import() 進(jìn)行代碼拆分
?? 按需加載模塊
async function handleClick() {
const { someFunction } = await import("../utils/heavyFunctions");
someFunction();
}? 優(yōu)化點(diǎn)
- 僅在需要時(shí)加載模塊
- 避免影響主 JS 體積
?? 總結(jié)
用法 | 適用場(chǎng)景 | 優(yōu)化點(diǎn) |
默認(rèn)動(dòng)態(tài)導(dǎo)入 | 組件懶加載 | ? 只在需要時(shí)加載 |
SSR 關(guān)閉 ( | 依賴 | ? 避免 |
自定義加載狀態(tài) | 顯示 Loading UI | ? 提升用戶體驗(yàn) |
事件觸發(fā)加載 | 用戶交互后才加載 | ? 減少不必要的 JS |
?? 一句話總結(jié)?? next/dynamic 讓 Next.js 組件支持懶加載，減少 JS 體積，優(yōu)化頁(yè)面性能！
責(zé)任編輯：武曉燕
來(lái)源：
大遷世界
