React中的代码拆分的方法

什么是代码拆分以及如何在React应用中引入它

现代的JavaScript应用程序在包的大小方面可能是相当巨大的。你不希望你的用户不得不下载一个1MB的JavaScript包（你的代码和你使用的库）只是为了加载第一个页面，对吗？但是，当你用Webpack捆绑的方式发布一个现代的Web App时，这就是默认发生的事情。

该捆绑包将包含可能永远不会运行的代码，因为用户只停留在登录页面，而不会看到你的应用程序的其他部分。

代码分割是指只在你需要的时候加载你需要的JavaScript的做法。

这可以提高。

• 你的应用程序的性能
• 对内存的影响，以及移动设备上的电池使用情况
• 下载的KiloBytes（或MegaBytes）大小

2018年10月发布的React 16.6.0引入了一种执行代码拆分的方式，应该可以取代以前使用的每一个工具或库。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>
)