React.lazy懶加載組件

1. React.lazy的用法

React.lazy方法可以異步加載組件文件。

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

React.lazy不能單獨使用，需要配合React.suspense，suspence是用來包裹異步組件，添加loading效果等。

<React.Suspense fallback={<div>loading...</div>}>
    <Foo/>
</React.Suspense>

2. React.lazy原理

React.lazy使用import來懶加載組件，import在webpack中最終會調用requireEnsure方法，動態插入script來請求js文件，類似jsonp的形式。