懒加载
懒加载 在 Next.js 中通过减少渲染路由所需的 JavaScript 代码量,帮助提升应用的初始加载性能。
它允许你延迟加载客户端组件和导入的库,仅在需要时才将其包含在客户端包中。例如,你可能希望延迟加载模态框,直到用户点击打开它。
在 Next.js 中,你可以通过两种方式实现懒加载
- 使用带有
next/dynamic
的 动态导入 - 使用带有
React.lazy()
和 Suspense
默认情况下,服务器组件会自动进行代码分割,你可以使用流式处理来逐步将 UI 片段从服务器发送到客户端。懒加载适用于客户端组件。
next/dynamic
next/dynamic
是 React.lazy()
和 Suspense 的组合。它在 app
和 pages
目录中的行为方式相同,以便于增量迁移。
示例
通过使用 next/dynamic
,header 组件将不会包含在页面的初始 JavaScript 包中。页面将首先渲染 Suspense 的 fallback
,然后在 Suspense
边界解析后渲染 Header
组件。
import dynamic from 'next/dynamic'
const DynamicHeader = dynamic(() => import('../components/header'), {
loading: () => <p>Loading...</p>,
})
export default function Home() {
return <DynamicHeader />
}
须知:在
import('path/to/component')
中,路径必须显式编写。它不能是模板字符串或变量。此外,import()
必须在dynamic()
调用内部,以便 Next.js 能够将 webpack 包/模块 ID 与特定的dynamic()
调用匹配,并在渲染之前预加载它们。dynamic()
不能在 React 渲染内部使用,因为它需要在模块的顶层标记,以便预加载工作,类似于React.lazy
。
使用命名导出
要动态导入命名导出,你可以从 Promise 中返回它,该 Promise 由 import()
返回
export function Hello() {
return <p>Hello!</p>
}
// pages/index.js
import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(() =>
import('../components/hello').then((mod) => mod.Hello)
)
不使用 SSR
要在客户端动态加载组件,你可以使用 ssr
选项禁用服务器端渲染。如果外部依赖项或组件依赖于浏览器 API(如 window
),这将非常有用。
'use client'
import dynamic from 'next/dynamic'
const DynamicHeader = dynamic(() => import('../components/header'), {
ssr: false,
})
使用外部库
此示例使用外部库 fuse.js
进行模糊搜索。该模块仅在用户在搜索输入框中输入内容后才在浏览器中加载。
import { useState } from 'react'
const names = ['Tim', 'Joe', 'Bel', 'Lee']
export default function Page() {
const [results, setResults] = useState()
return (
<div>
<input
type="text"
placeholder="Search"
onChange={async (e) => {
const { value } = e.currentTarget
// Dynamically load fuse.js
const Fuse = (await import('fuse.js')).default
const fuse = new Fuse(names)
setResults(fuse.search(value))
}}
/>
<pre>Results: {JSON.stringify(results, null, 2)}</pre>
</div>
)
}
这篇文章对您有帮助吗?