懒加载
懒加载 在 Next.js 中,通过减少渲染路由所需的 JavaScript 代码量,帮助提高应用程序的初始加载性能。
它允许你延迟加载 客户端组件 和导入的库,并在需要时才将它们包含在客户端包中。例如,你可能希望延迟加载模态框,直到用户点击打开它。
在 Next.js 中,有两种方法可以实现懒加载
- 使用 动态导入 和
next/dynamic
- 使用
React.lazy()
和 Suspense
默认情况下,服务器组件会自动进行 代码分割,你可以使用 流式处理 从服务器逐步将 UI 片段发送到客户端。懒加载适用于客户端组件。
next/dynamic
next/dynamic
是 React.lazy()
和 Suspense 的组合。它在 app
和 pages
目录中的行为方式相同,以便进行增量迁移。
示例
导入客户端组件
'use client'
import { useState } from 'react'
import dynamic from 'next/dynamic'
// Client Components:
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>
{/* Load immediately, but in a separate client bundle */}
<ComponentA />
{/* Load on demand, only when/if the condition is met */}
{showMore && <ComponentB />}
<button onClick={() => setShowMore(!showMore)}>Toggle</button>
{/* Load only on the client side */}
<ComponentC />
</div>
)
}
注意: 当服务器组件动态导入客户端组件时,目前不支持自动 代码分割。
跳过 SSR
当使用 React.lazy()
和 Suspense 时,客户端组件默认会被 预渲染 (SSR) 。
注意:
ssr: false
选项仅适用于客户端组件,请将其移至客户端组件中以确保客户端代码分割正常工作。
如果你想禁用客户端组件的预渲染,可以使用设置为 false
的 ssr
选项
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
导入服务器组件
如果你动态导入服务器组件,只有作为服务器组件子级的客户端组件会被懒加载 - 而服务器组件本身不会。当你在服务器组件中使用它时,它也有助于预加载静态资源,例如 CSS。
import dynamic from 'next/dynamic'
// Server Component:
const ServerComponent = dynamic(() => import('../components/ServerComponent'))
export default function ServerComponentExample() {
return (
<div>
<ServerComponent />
</div>
)
}
注意: 服务器组件中不支持
ssr: false
选项。如果你尝试在服务器组件中使用它,你将会看到一个错误。在服务器组件中,next/dynamic
不允许使用ssr: false
。请将其移至客户端组件中。
加载外部库
可以使用 import()
函数按需加载外部库。此示例使用外部库 fuse.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
// 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>
)
}
添加自定义加载组件
'use client'
import dynamic from 'next/dynamic'
const WithCustomLoading = dynamic(
() => import('../components/WithCustomLoading'),
{
loading: () => <p>Loading...</p>,
}
)
export default function Page() {
return (
<div>
{/* The loading component will be rendered while <WithCustomLoading/> is loading */}
<WithCustomLoading />
</div>
)
}
导入命名导出
要动态导入命名导出,你可以从 import()
函数返回的 Promise 中返回它
'use client'
export function Hello() {
return <p>Hello!</p>
}
import dynamic from 'next/dynamic'
const ClientComponent = dynamic(() =>
import('../components/hello').then((mod) => mod.Hello)
)
这有帮助吗?