什麼是代碼分割,以及如何在React應用程序中引入它
現代JavaScript應用程序在捆綁大小方面可能相當巨大。您不希望用戶需要下載1MB大小的JavaScript包(包括您的代碼和使用的庫)才能加載首頁,對吧?但是這是使用Webpack捆綁構建的現代Web應用程序的默認情況。
該捆綁包將包含一些可能永遠不會運行的代碼,因為用戶只停留在登錄頁,從不看到應用程序的其他部分。
代碼分割是僅在需要時加載JavaScript的一種實踐方式。
這將改善:
- 應用程序的性能
- 對內存的影響,以及移動設備的電池使用情況
- 下載的基於KB(或MB)的大小
React 16.6.0於2018年10月發布,引入了一種進行代碼分割的新方法,它應該取代以前使用的所有工具或庫:React.lazy和Suspense。
React.lazy
和Suspense
組成了一種完美的方式來懶加載依賴項,並且只在需要時加載它。
讓我們從React.lazy
開始。您可以使用它來導入任何組件:
import React from 'react'
const TodoList = React.lazy(() => import('./TodoList'))
export default () => {
return (
<div>
<TodoList />
</div>
)
}
在它可用的時候,TodoList組件將動態添加到輸出中。Webpack將為其創建一個單獨的捆綁包,並在需要時進行加載。
Suspense
是一個您可以用於包裝任何懶加載組件的組件:
import React from 'react'
const TodoList = React.lazy(() => import('./TodoList'))
export default () => {
return (
<div>
<React.Suspense>
<TodoList />
</React.Suspense>
</div>
)
}
它負責處理在懶加載組件被提取和渲染時的輸出。
使用fallback
屬性輸出一些JSX或組件:
...
<React.Suspense fallback={<p>Please wait</p>}>
<TodoList />
</React.Suspense>
...
這一切都可以很好地與React Router配合使用:
import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
const TodoList = React.lazy(() => import('./routes/TodoList'))
const NewTodo = React.lazy(() => import('./routes/NewTodo'))
const App = () => (
<Router>
<React.Suspense fallback={<p>Please wait</p>}>
<Switch>
<Route exact path="/" component={TodoList} />
<Route path="/new" component={NewTodo} />
</Switch>
</React.Suspense>
</Router>
)