React.lazy

React.lazy

注意：

React.lazy和Suspense 技术还不支持服务器端渲染。如果你想要在使用服务端渲染的应用中使用，推荐 Loadable Componentszhe 这个库。
React.lazy 函数能让你像渲染常规组件一样处理动态引入 （组件）。

使用之前

import OtherComponent from './OtherComponent'

function MyComponent(){
	return (
		<div>
			<OtherComponent />
		</div>
	);
}

使用之后：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
	return(
		<div>
			<OtherComponent />
		</div>
	);
}

这个代码将会在渲染组件时，自动导入包含 OtherComponent 组件的包。
React.lazy 接受一个函数，这个函数需要动态调用 import() 。它必须返回一个 Promise，该 Promise 需要 resolve 一个defalut export 的 React 组件。

Suspense

如果在MyComponent 渲染完成后，包含 OtherComponent 的模块还没有被加载完成，我们可以使用加载指示器为此组件做优雅降级。这里我们使用 Suspense 组件来解决。

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
	return (
		<div>
			<Suspense fallback={<div>loading...</div>} >
				<OtherComponent />
			</Suspense>
		</div>
	);
}

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AntherComponent = React.lazy(() => import('./AntherComponent'));

function MyComponent() {
	return (
		<div>
			<Suspense fallback={<div>loading...</div>}>
				<section>
					<OtherComponent />
					<AnotherComponent />
				</section>
			</Suspense>
		</div>
	);
}

异常捕获边界

如果模块加载失败 （如网络问题），它会触发一个错误。你可以通过异常捕获边界技术来处理这些情况，以显示良好的用户体验并管理回复事宜。

import MyErrorBoundary form './MyErrorBoundary';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

const MyComponent = () => (
	<div>
		<MyErrorBoundary>
			<Suspense fallback={<div>Loading...</div>}>
				<section>
					<OtherComponent />
					<AnotherComponent />
				</section>
			</Suspense>
		</MyErrorBoundary>
	</div>
);

基于路由的代码分割

决定在哪引入代码分割需要一些技巧。你需要确保选择的位置能够均匀地分割代码包而不会影响用户体验。

一个不错的选择是从路由开始。大多数网络用户习惯于页面之间能有个加载切换过程。你也可以选择重新渲染整个页面，这样您的用户就不必在渲染的同时再和页面上的其他元素进行交互。

这里是一个例子，展示如何在你的应用中使用 React.lazy 和 React Router 这类的第三方库，来配置基于路由的代码分割。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

命名导出

React.lazy 目前只支持默认导出（default exports）。如果你想被引入的模块使用命名导出（named exports），你可以创建一个中间模块，来重新导出为默认模块。这能保证 tree shaking 不会出错，并且不必引入不需要的组件。

// ManyComponents.js

export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;

// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";

// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));