1. react.lazy() 接受乙個函式作為引數,這個函式動態呼叫 import , 該函式的返回值必須是乙個 promise,該 promise 必須 resolve 乙個 【default export】的元件。
2. lazy 載入的元件必須在 suspense 中使用。否則會報錯。
3. suspense 元件接受乙個 fallback 屬性。fallback
屬性接受任何在元件載入過程中你想展示的 react 元素,比如loading。該屬性必須傳遞,否則會報錯。如果不想載入
內容可以傳遞 null
4. suspense 元件中可以包裹多個懶載入元件。
//mycomponent.js中
class mycomponent extends react.component {}
export
default
mycomponent
中import react, from 'react';
const mycomponent = react.lazy(() => import('./mycomponent'))
reactdom.render(
loading...
}>
,document.getelementbyid('root')
)
未完待續
路由懶載入與元件懶載入
一 為什麼要使用路由懶載入 為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件 和 es中的import 1 不用懶載入,vue中路由 如下 impor...
路由懶載入和元件懶載入
為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件和es中的import 1 未用懶載入,vue中路由 如下 import vue from vue i...
vue路由懶載入及元件懶載入
一 為什麼要使用路由懶載入 為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件和es中的import 1 未用懶載入,vue中路由 如下 import ...