React 代码拆分
React应用程序使用 Webpack 或 Browserfy 之类的工具捆绑了文件。捆绑是一个将多个文件合并到一个文件中的过程，该文件称为捆绑。该捆绑包负责一次在网页上加载整个应用程序。我们可以从下面的示例中了解它。
App.js
import { add } from './math.js';
console.log(add(16, 26)); // 42
math.js
export function add(a, b) {
return a + b;
}
捆绑文件如下:
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
将代码拆分到应用中的最佳方法是通过动态 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的捆绑软件。
暂挂
如果包含ExampleComponent的模块为尚未由功能组件(MyComponent)加载，那么在等待加载时，我们需要显示一些 fallback 内容。我们可以使用悬念组件来做到这一点。换句话说，暂挂组件负责在获取和呈现惰性组件时处理输出。
const ExampleComponent = React.lazy(() => import('./ ExampleComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<ExampleComponent />
</Suspense>
</div>
);
}
后备Props接受要在等待组件加载时渲染的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.lazy的React Router将基于路由的代码拆分到应用程序中的示例。
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>
);
命名为导出
当前，React.lazy仅支持默认导出。如果要使用命名导出导入任何模块，则需要创建一个中间模块，将其作为默认值重新导出。我们可以从以下示例中了解它。
ExampleComponents.js
export const MyFirstComponent = /* ... */;
export const MySecondComponent = /* ... */;
MyFirstComponent.js
export { MyFirstComponent as default } from "./ExampleComponents.js";
MyApp.js
import React, { lazy } from 'react';
const MyFirstComponent = lazy(() => import("./MyFirstComponent.js"));
