React.lazy和React.Suspense異步加載組件

在React16.6中引入了React.lazy和React.Suspense，這兩個組件，可以用來實現異步加載組件。

例如：

const johanComponent = React.lazy(() => import(/* webpackChunkName: "johanComponent" */ './myAwesome.component'));
 
export const johanAsyncComponent = props => (
  <React.Suspense fallback={<Spinner />}>
    <johanComponent {...props} />
  </React.Suspense>
);

對比react-loadable，React.Suspense還是有一些不足。

1. 加載組件缺少delay參數，不能解決請求快速完成時的"閃爍"問題（即使加載模塊只需要幾毫秒的時間， fallback也會被執行，就上述代碼來說，也就是 Spinner 會閃爍一下），需要自己封裝

2. 沒有內置的加載錯誤處理方法，需要自己去處理

3. react-loadable有預加載支持，React.Lazy沒有

 

仍然推薦使用react-loadable來異步加載組件，暫時不用React.Suspense。

 

參考：https://blog.csdn.net/roamingcode/article/details/85946380