Skip to main content

懒加载

在 Next.js 中,懒加载有助于通过减少渲染路由所需的 JavaScript 量来提高应用程序的初始加载性能。

它允许您推迟加载客户端组件和导入的库,并仅在需要时将它们包含在客户端捆绑包中。 例如,您可能希望推迟加载模态框,直到用户单击以打开它。

在 Next.js 中,有两种实现懒加载的方式:

  1. 使用带有 next/dynamic 的动态导入
  2. 使用 React.lazy()Suspense

默认情况下,Server Components 会自动进行代码拆分, 并且您可以使用流式传送逐步将 UI 部分从服务器发送到客户端。懒加载适用于客户端组件。

next/dynamic

next/dynamicReact.lazy()Suspense 的组合。 它在 apppages 目录中的行为相同,以便进行增量迁移。

示例

导入客户端组件

app/page.js
'use client'

import { useState } from 'react'
import dynamic from 'next/dynamic'

// 客户端组件:
const ComponentA = dynamic(() => import('../components/A'))
const ComponentB = dynamic(() => import('../components/B'))
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })

export default function ClientComponentExample() {
const [showMore, setShowMore] = useState(false)

return (
<div>
{/* 立即加载,但在单独的客户端捆绑包中 */}
<ComponentA />

{/* 按需加载,仅在满足条件时/如果满足条件时加载 */}
{showMore && <ComponentB />}
<button onClick={() => setShowMore(!showMore)}>Toggle</button>

{/* 仅在客户端加载 */}
<ComponentC />
</div>
)
}

跳过 SSR

当使用 React.lazy()Suspense 时,默认情况下会对客户端组件进行预渲染(SSR)。

如果要禁用对客户端组件的预渲染,可以使用 ssr 选项设置为 false

const ComponentC = dynamic(() => import('../components/C'), { ssr: false })

导入服务器组件

如果动态导入了服务器组件,那么只有作为服务器组件子代的客户端组件会被懒加载,而不是服务器组件本身。

app/page.js
import dynamic from 'next/dynamic'

// 服务器组件:
const ServerComponent = dynamic(() => import('../components/ServerComponent'))

export default function ServerComponentExample() {
return (
<div>
<ServerComponent />
</div>
)
}

加载外部库

可以使用 import() 函数按需加载外部库。 此示例使用外部库 fuse.js 进行模糊搜索。该模块仅在用户在搜索输入框中键入时才在客户端加载。

app/page.js
'use client'

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
// 动态加载 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>
)
}

添加自定义加载组件

app/page.js
import dynamic from 'next/dynamic'

const WithCustomLoading = dynamic(
() => import('../components/WithCustomLoading'),
{
loading: () => <p>Loading...</p>,
}
)

export default function Page() {
return (
<div>
{/* 在 <WithCustomLoading/> 加载时将渲染加载组件 */}
<WithCustomLoading />
</div>
)
}

导入具名导出

要动态导入具名导出,可以从 import() 函数返回的 Promise 中返回它:

components/hello.js
'use client'

export function Hello() {
return <p>Hello!</p>
}
app/page.js
import dynamic from 'next/dynamic'

const ClientComponent = dynamic(() =>
import('../components/hello').then((mod) => mod.Hello)
)