React中的代码拆分

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

就捆绑包大小而言,现代JavaScript应用程序可能非常庞大。您不希望您的用户仅下载第一页就下载1MB的JavaScript软件包(您的代码和所用的库),对吗?但这是默认情况下,当您发布使用Webpack捆绑构建的现代Web应用程序时。

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

代码拆分是仅在需要时加载所需JavaScript的一种做法。

这样可以改善:

  • 您的应用程序的性能
  • 对内存的影响,以及移动设备上的电池使用情况
  • 下载的千字节(或兆字节)大小

2018年10月发布的React 16.6.0引入了一种执行代码拆分的方法,该方法应取代以前使用的每个工具或库:React.lazy悬念

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> )

免费下载我的反应手册


更多反应教程: