React使用代码分离 – ReactJS实战教程 react代码分离|React

上一章ReactJS实战教程请查看：React高阶组件用法
React应用程序使用Webpack或Browserfy等工具将他们的文件绑定/打包在一起，绑定是一个获取多个文件并将它们合并到单个文件(称为包)中的过程，bundle包负责在网页上加载整个应用程序。我们可以从下面的例子中理解它。
App.js

import { add } from './math.js'; console.log(add(16, 26)); // 42

math.js

export function add(a, b) { return a + b; }

bundle文件如下所示：

function add(a, b) { return a + b; }console.log(add(16, 26)); // 42

随着应用程序的增长，我们的包也会增长，特别是当我们使用大型第三方库时。如果包的大小变大，加载到网页上需要很长时间。为了避免大规模的包，我们需要将包实现分离。
React 16.6.0于2018年10月发布，并引入了一种执行代码分离的方法。代码分离是Webpack和Browserify支持的一个特性，它可以创建多个包，这些包可以在运行时动态加载。
代码分离使用React.lazy和Suspense工具/库，它帮助你懒洋洋地加载一个依赖项，只有当用户需要时才加载它。
代码分离改进:

应用程序的性能
对内存的影响
下载的千字节(或兆字节)大小

React.lazy【React使用代码分离 – ReactJS实战教程】将代码分离到应用程序的最佳方法是使用动态import()语法，React.lazy函数允许我们将动态导入呈现为常规组件。
之前的使用

import ExampleComponent from './ExampleComponent'; function MyComponent() { return ( < div> < ExampleComponent /> < /div> ); }

现在的使用

const ExampleComponent = React.lazy(() => import('./ExampleComponent')); function MyComponent() { return ( < div> < ExampleComponent /> < /div> ); }

上面的代码片段在渲染ExampleComponent时自动加载含ExampleComponent的包。
Suspense如果包含ExampleComponent的模块还没有被函数组件(MyComponent)加载，那么我们需要在等待加载时显示一些回退内容。我们可以使用Suspense组件来做到这一点。换句话说，在获取和渲染延迟组件时，Suspense组件负责处理输出。

const ExampleComponent = React.lazy(() => import('./ ExampleComponent')); function MyComponent() { return ( < div> < Suspense fallback={< div>Loading...< /div>}> < ExampleComponent /> < /Suspense> < /div> ); }

后退prop接受你在等待组件加载时希望渲染的React元素，我们可以将多个延迟组件与一个Suspense组件组合在一起。可以在下面的例子中看到。

const ExampleComponent = React.lazy(() => import('./ ExampleComponent')); const ExamComponent = React.lazy(() => import('./ ExamComponent')); function MyComponent() { return ( < div> < Suspense fallback={< div>Loading...< /div>}> < section> < ExampleComponent /> < ExamComponent /> < /section> < /Suspense> < /div> ); }

注意：React.lazy和Suspense组件尚不能用于服务器端渲染，对于在服务器渲染的应用程序中进行代码拆分，建议使用可加载组件。
错误边界如果任何模块加载失败，例如由于网络故障，我们将收到错误消息。我们可以使用“错误边界”处理这些错误。一旦创建了错误边界，就可以在惰性组件上方的任何地方使用它来显示错误状态。

import MyErrorBoundary from './MyErrorBoundary'; const ExampleComponent = React.lazy(() => import('./ ExampleComponent')); const ExamComponent = React.lazy(() => import('./ ExamComponent')); const MyComponent = () => ( < div> < MyErrorBoundary> < Suspense fallback={< div>Loading...< /div>}> < section> < ExampleComponent /> < ExamComponent /> < /section> < /Suspense> < /MyErrorBoundary> < /div> );

基于路径的代码分离这是非常棘手的决定，我们在应用程序中引入分离的代码。为此，我们必须确保我们选择的地方，将分离的捆绑包平均不会破坏用户体验。
路由是开始代码分割的最佳位置，在web上的页面转换过程中，基于路由的代码分割是非常重要的，这需要一定的加载时间。下面是一个如何使用React Router和React.lazy设置基于路由的代码分离到应用程序的例子。

import { Switch, BrowserRouter as Router, Route} from 'react-router-dom'; import React, { Suspense, lazy } from 'react'; const Home = lazy(() => import('./routes/Home')); const About = lazy(() => import('./routes/About')); const Contact = lazy(() => import('./routes/Contact')); const App = () => ( < Router> < Suspense fallback={< div>Loading...< /div>}> < Switch> < Route exact path="/" component={Home}/> < Route path="/about" component={About}/> < Route path="/contact" component={Contact}/> < /Switch> < /Suspense> < /Router> );

使用export实现代码分离当前，React.lazy仅支持默认导出。如果要使用命名导出导入任何模块，则需要创建一个中间模块，将其重新导出为默认模块。我们可以从以下示例中了解它。
ExampleComponents.js