Next.js系列——按需加载

按需加载-动态导入

import React, { useState, useEffect } from 'react'

// import moment from "moment"

import dynamic from "next/dynamic"


const DynamicComponent = dynamic(() => import('./Ha'))


export default function index() {
  let [state, setState] = useState()

  useEffect(() => setState(Date.now()), []) //时间戳赋值 还非要这么写 不然报错

  async function handlerTime() {

    // 本来是在上方引入 这么写等于 方法执行再引入 按需加载
    const Moment = await import("moment")

    let aa = Date.now()

    setState(Moment.default(aa).format())

  }
  return (
    <div>
      <div>当前时间为：{state}</div>
      <button onClick={handlerTime}>点我切换</button>
      <p>动态导入</p>
      <DynamicComponent></DynamicComponent>
    </div>
  )
}

参考：
1.技术胖-React服务端渲染框架Next.js入门教程
2.Moment.js http://momentjs.cn/
3.https://www.nextjs.cn/docs/advanced-features/dynamic-import