Nextjs的懒加载使用方法

在项目中,适当地对一些比较重的模块进行懒加载处理,能提高应用的初始化加载速度, 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>
  )
}

效果如下

相关推荐
jiangzhihao051538 分钟前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI3 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front4 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie4 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀4 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻4 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树5 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔5 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04125 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj505 小时前
前端基础之《React(1)—webpack简介》
前端·react