nextJS 懒加载

什么是懒加载

当路由导航到某个模块，或者某个组件的时候，才加载那个模块/组件的js文件。

模块懒加载

第一步，先选择一个需要懒加载的插件，我们拿moment做例子。先安装它：

npm install moment -s

第二步，在页面里，用moment写一个例子

const Task = ({ time }) => (
    <div>
        <span>time：{time}</span>
    </div>
)

Task.getInitialProps = async (ctx) =>{
    const moment = await import('moment')
    return { 
    	time: moment.default(Date.now() - 60*1000).fromNow()
    }
}

export default withRouter(Task)

第三步，重启，运行，在network里会发现moment的代码被新打包成了一个1.js加载出来

组件懒加载

第一步，先新建一个组件

task.list.jsx

const TaskList = ()=>{
    return <div>这里是任务列表</div>
}
export default TaskList

第二步，再在页面内引入

task.js

import dynamic from 'next/dynamic'
const TaskList = dynamic(import('../components/pages/task/task.list'))
const Task = ()=>{
	return <TaskList />
}
export default TaskList

第三步，重启，运行。在network里会发现task.list.js被新打包了一个js加载出来