React.lazy() 允許你定義一個(gè)動(dòng)態(tài)加載的組件。這有助于縮減 bundle 的體積,并延遲加載在初次渲染時(shí)未用到的組件法精。
1刚照、 異步加載組件
const Foo = React.lazy(() => import('../componets/Foo));
2、React.lazy不能單獨(dú)使用摔认,需要配合React.suspense逆皮,suspence是用來(lái)包裹異步組件,添加loading效果等级野。
<React.Suspense fallback={<div>loading...</div>}>
<Foo/>
</React.Suspense>
3页屠、React.lazy原理
React.lazy使用import來(lái)懶加載組件粹胯,import在webpack中最終會(huì)調(diào)用requireEnsure方法,動(dòng)態(tài)插入script來(lái)請(qǐng)求js文件辰企,類(lèi)似jsonp的形式风纠。