什麼是代碼分割,以及如何在React應用程序中引入它

現代JavaScript應用程序在捆綁大小方面可能相當巨大。您不希望用戶需要下載1MB大小的JavaScript包(包括您的代碼和使用的庫)才能加載首頁,對吧?但是這是使用Webpack捆綁構建的現代Web應用程序的默認情況。

該捆綁包將包含一些可能永遠不會運行的代碼,因為用戶只停留在登錄頁,從不看到應用程序的其他部分。

代碼分割是僅在需要時加載JavaScript的一種實踐方式。

這將改善:

  • 應用程序的性能
  • 對內存的影響,以及移動設備的電池使用情況
  • 下載的基於KB(或MB)的大小

React 16.6.0於2018年10月發布,引入了一種進行代碼分割的新方法,它應該取代以前使用的所有工具或庫:React.lazy和Suspense。

React.lazySuspense組成了一種完美的方式來懶加載依賴項,並且只在需要時加載它。

讓我們從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>
)