React.lazy 动态加载的组件

React.lazy() 允许你定义一个动态加载的组件。这有助于缩减 bundle 的体积,并延迟加载在初次渲染时未用到的组件。

1、 异步加载组件

const Foo = React.lazy(() => import('../componets/Foo));

2、React.lazy不能单独使用,需要配合React.suspense,suspence是用来包裹异步组件,添加loading效果等。

loading...
}>

3、React.lazy原理
React.lazy使用import来懒加载组件,import在webpack中最终会调用requireEnsure方法,动态插入script来请求js文件,类似jsonp的形式。

你可能感兴趣的:(React.lazy 动态加载的组件)