在项目中,适当地对一些比较重的模块进行懒加载处理,能提高应用的初始化加载速度, nextjs提供了nextjs/dynamic
这个模块来实现懒加载。
基础例子
jsx
'use client'
import { useCallback, 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 })
const WithCustomLoading = dynamic(
() => import('./components/B'),
{
loading: () => <p>Loading...</p>,
}
)
export default function Home() {
const [visible, setVisible] = useState(false)
const handleTrigger = useCallback(() => { setVisible(!visible) })
return (
<main>
{/* 模块 A 会被分包,并且立即加载 */}
<ComponentA />
{/* 模块 B 会按需加载 */}
{visible && <ComponentB />}
{/* 模块 C 会被分包,并且关闭ssr 模式,在客户端执行 */}
<ComponentC />
<button onClick={handleTrigger}>trigger</button>
</main>
)
}
加载情况可以看下面的截图,模块 A 和模块 C 都被分包
当点击了按钮,将visible的值改为 true 时,模块 B 也被动态加载。
懒加载外部库
可以用到import()
来引入模块
module.a.js
js
export const name = 1
export const isModule = true
js
// 通过相对路径来引入模块
import("./module.a").then(({ name, isModule }) => {
console.log(name, isModule)
})
// 引入外部库
import("fuse.js").then((module) => {
const Fuse = module.default
console.log(Fuse)
})
懒加载组件时的加载回显
js
import dynamic from 'next/dynamic'
const WithCustomLoading = dynamic(
() => import('../components/WithCustomLoading'),
{
loading: () => <p>Loading...</p>,
}
)
export default function Page() {
return (
<div>
{/* 当组件加载时会展示 loading 状态 <WithCustomLoading/> */}
<WithCustomLoading />
</div>
)
}
效果如下