翻译至React官方docs Code-Splitting
Bundling
越来越多的React应用使用Webpack、Browserify等工具进行资源打包。前端打包即是将所有的资源文件全部压缩至一个文件里面：bundle。这个bundle被网页加载后，整个web app便立马被呈现出来。
Example
App:
// 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
注意:
打包出来的bundle文件相对于之前会有大的变化
如果你使用Create React App, Next.js, Gatsby或者其他打包工具，你可以开箱即用的Webpack来打包你的app。
如果你未使用以上工具，可以参考Webpack相关文档开始打包。Installation Getting Started
Code Splitting
应用进行bundle打包固然是好的，但随着应用的逐步增长，则打包的文件也会越来越庞大，特别是对于引用的三方库。你打包时需要时刻注意这些三方库代码，以免在不经意间使得打包文件过大而造成应用加载的缓慢。
为了避免打包后的文件臃肿，我们推荐的解决方式是在代码中使用”splitting”。Code-Splitting可以打出多个bundle，应用可以根据此时的需要进行实时bundle加载，目前Webpack和Browserify（通过factor-bundle方式）均已支持Code-Splitting。
Code-splitting通过按需加载的方式可以大幅提高应用的体检。 而且你不需要对你的代码进行删减，你可以避免加载你并不需要的代码，还可以减少初次加载的代码。
import()
最好的方式使用code-splitting 是通过动态import这种方式。
Before:
import { add } from './math';
console.log(add(16, 26));
After:
import("./math").then(math => {
console.log(math.add(16, 26));
});
注意：
动态import语法被列为ECMAScript下一代标准的建议中，预计在将来会被接收。
当Webpack遇到这种语法时，它会自动在应用中开启code-splitting。假如你使用的是Create React App创建的项目，它已经在项目中自动配置动态import，你可以直接使用。它也可以在Next.js中开箱即用。
假如你自己在项目中配置Webpack, name你需要尽可能地阅读Webpack关于code splitting的指导。你的Webpack配置需要尽可能地与这个保持一致。
当我们使用Babel工具时，你需要清除知道Babel可以解析动态import语法，但不会对其转换。所以你需要 babel-plugin-syntax-dynamic-import这个插件。
React.lazy
注意
React.lazy 和 Suspense组件目前并没有支持服务端渲染。如果你需要在服务端做code-splitting，我们还是推荐使用React Loadable。它对于服务端渲染做splitting有着良好的引导方式。
React.Lazy方法可以对常规组件进行dynamic import。
Before:
import OtherComponent from './OtherComponent';
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
After:
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
当这个组件渲染完成后，它会自动加载包含OtherComponent这个组件的bundle。
React.lazy必须使用dynamic import()方法。它会返回一个Promise，当它resolve时，它会返回一个默认导出的React组件模块。
Suspense
如果我们自定义的组件MyComponent渲染时，这个包含OtherComponent的模块并没有加载，我们必须在加载过程中展示一些过渡内容--比如加载进度条。我们可以使用Suspense来完成这个事。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
fallback prop 可以接受任意的React elements 当你在等待其他组件渲染时，你可以将Suspense放在任意的lazy component上。你甚至可以在一个Suspense component中包裹几个lazy components。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}
Error boundaries
如果其他的模块加载失败（比如因为网络异常）,它会抛出一个错误。你可以处理这些错误，提供一个好的用户体验并复原这些Error Boundary, 。一旦你创建了Error Boundary, 你可以在任意lazy components使用它。当网络错误时，可以显示错误的状态。
import MyErrorBoundary from '/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>
);
Route-based code splitting
可能在应用中开始使用splitting code会有一点冒险.你需要确定当你引入split bundles后不会影响到用户体验。
先使用routes会是一个不错的方式。在开发Web应用时，大多数人会因为界面的转换而花费大量的时间加载。你也同样倾向于重新渲染整个界面一次，让你们的用户不能同时与界面上的其他元素交互。
下面是一个例子，展示了在基于route的方式下通过使用React Router with React.lazy这些库进行code splitting.
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>
);
Named Exports
React.lazy目前只支持 default exports默认导出方式。如果你想要使用命名导出，你可以创建一个中间模块进行二次导出。它可以确保treeshaking(Webpack打包时移除不必要的组件)继续工作，并且不会拉入未使用的组件。
// 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"));
