在React中的代碼分割

什麼是代碼分割，以及如何在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>
)

tags: [“React”, “Code Splitting”, “React.lazy”, “Suspense”]