P08:Next.js教程-Lazy Loading实现模块懒加载
当项目越来越大的时候,模块的加载是需要管理的,如果不管理会出现首次打开过慢,页面长时间没有反应一系列问题。这时候可用Next.js
提供的LazyLoading
来解决这类问题。让模块和组件只有在用到的时候在进行加载,一般我把这种东西叫做“懒加载”。它一般分为两种情况,一种是懒加载(或者说是异步加载)模块,另一种是异步加载组件。他们使用的方法也稍有不同,下面我们就来分别学习一下。
懒加载模块
这里使用一个在开发中常用的模块Moment.js
,它是一个 JavaScript 日期处理类库,Moment.js 中文官网。
使用前需要先进行安装,这里使用npm
来进行安装。
npm install --save moment
也可以使用yarn
来进行安装。
yarn add momnet
然后在pages
文件夹下,新建立一个time.js
文件,并使用刚才的moment
库来格式化时间,代码如下:
import React, { useState } from 'react'; import moment from 'moment' function Time() { const [nowTime,setTime] = useState(Date.now()) const changeTime = () => { setTime(moment(Date.now()).format()) } return ( <> <div>现在时间是:{nowTime}</div> <div><button onClick={changeTime}>改变时间格式</button></div> </> ) } export default Time
这个看起来很简单和清晰的案例,缺存在着一个潜在的风险,就是如果有半数以上页面使用了这个momnet
的库,那它就会以公共库的形式进行打包发布,就算项目第一个页面不使用moment
也会进行加载,这就是资源浪费,对于我这样有代码洁癖的良好程序员是绝对不允许的。下面我们就通过Lazy Loading
来进行改造代码。
import React, { useState } from 'react'; //删除 import moment function Time() { const [nowTime,setTime] = useState(Date.now()) const changeTime= async ()=>{ //把方法变成异步模式 const moment = await import('moment') //等待 moment 加载完成 setTime(moment.default(Date.now()).format()) //注意使用 defalut } return ( <> <div>现在时间是:{nowTime}</div> <div><button onClick={changeTime}>改变时间格式</button></div> </> ) } export default Time
这时候就就是懒加载了,可以在浏览器中按 F12,看一下Network
标签,当我们点击按钮时,才会加载1.js
,它就是momnet.js
的内容。
懒加载自定义组件
懒加载组件也是非常容易的,我们先来写一个最简单的组件,在components
文件夹下建立一个one.js
文件,然后编写如下代码:
export default ()=><div>Lazy Loading Component</div>
有了自定义组件后,先要在懒加载这个组件的文件中引入dynamic
,我们这个就在上边新建的time.js
文件中编写了。
import dynamic from 'next/dynamic'
引入后就可以懒加载自定义模块了,代码如下:
import React, { useState } from 'react'; import dynamic from 'next/dynamic' const One = dynamic(import('../components/one')) function Time() { const [nowTime,setTime] = useState(Date.now()) const changeTime= async ()=>{ //把方法变成异步模式 const moment = await import('moment') //等待 moment 加载完成 setTime(moment.default(Date.now()).format()) //注意使用 defalut } return ( <> <div>现在时间是:{nowTime}</div> <One/> <div><button onClick={changeTime}>改变时间格式</button></div> </> ) } export default Time
写完代码后,可以看到自定义组件是懒加载的,只有在jsx
里用到<One/>
时,才会被加载进来,如果不使用就不会被加载。
当我们做的应用存在首页打开过慢和某个页面加载过慢时,就可以采用Lazy Loading
的形式,用懒加载解决这些问题。
码云笔记 » P08:Next.js教程-Lazy Loading实现模块懒加载