开发react单页应用的时候,我们打包后的代码会非常大,这会影响首页应用的加载速度,拉低用户体验,所以在开发工程中应该使用react-loadable来进行代码分割,将单个js文件切割成多个chunk.js,这样实现了代码的按需加载。
这是官网对于他的介绍
A higher order component for loading components with dynamic imports.
用于加载带有动态导入的组件的高阶组件。
下面是简单的实际操作:
安装
$yarn add react-loadable
$npm add react-loadable
$cnpm add react-loadable
配置懒加载
./router.js:
import React,{Component} from 'react'
import Loadable from 'react-loadable'
ar Home=Loadable({ //异步加载组件
loader:()=>import("../App"),
loading:()=><div>loading.....</div>
})
var NotFound = Loadable({
loader:()=>import("../components/notfound"),
loading:()=><div>loading.....</div>
})
var DashBoard = Loadable({
loader:()=>import("../components/dashBoard"),
loading:()=><div>loading.....</div>
})
})
import():
当你在webpack中使用import()时,它将自动为你分割代码
Loading…
呈现静态“Loading…”不能与用户进行足够的通信。您还需要考虑错误状态、超时,并使之成为一种良好的体验。
Loadable
用于在呈现模块之前动态加载模块的高阶组件,在模块不可用时呈现加载组件。它是一个高阶组件(一个创建组件的函数),它允许您在将任何模块呈现到应用程序之前动态加载它。
const LoadableComponent = Loadable({
loader: () => import('./Bar'),
loading: Loading,
delay: 200,
timeout: 10000,//设置响应时间
});
关于react-loadable服务器渲染等更加高级操作可以参考官网
官网链接