[译]React高级指引2：代码分割

原文连接：reactjs.org/docs/code-s…

打包

大多数React应用都会使用Webpack，Rollup或Browserify来打包代码文件。打包是一个引入文件并把它们合并到一个文件的过程，最终造成一个bundle。这个bundle能够在网页上被加载一整个应用。

例子 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来打包你的应用。

若是不是，那么你须要自行安装打包工具。好比你能够在Webpack网站查看安装和使用教程。

代码分割

打包是个很是棒的技术，可是当你的应用逐渐扩大时，你最终生成的代码包也会随之变大，尤为是当你使用了庞大的第三方库时。为了不你的应用须要长时间地加载，请时刻注意须要包含在代码包内的代码，以避免它变得很大。

为了不生成体积巨大的代码包，咱们须要一开始就分割它们。代码分割是Webpack，Rollup和Browserify（经过factor-bundle）这类打包器支持的特性，它们能够构建多个代码包并在运行时动态地加载它们。

代码分割你的应用可让你“懒加载”当前用户须要的部分，使你的应用性能大幅度提升。在没有减小代码量的前提下，你能够避免加载用户不会用到的代码，减小初始化时加载的代码量。

import()

在应用中引进代码分割的最好方式是经过动态import()语法。

以前：

import { add } from './math';

console.log(add(16, 26));
复制代码

以后：

import("./math").then(math => {
  console.log(math.add(16, 26));
});
复制代码

注意： 动态import()语法只是ECMAScript (JavaScript) 的提案，目前还不是标准语法。可是在最近的版本中它将会被引进。

当Webpack在打包时遇到了此类语法，它就会自动地进行代码分割。若是你使用的是Create React App，建立的工程已经为你配置好相关功能，能够直接使用该特性。Next,js也支持该特性不须要再进行配置。

若是你自行配置Webpack，那么你可能须要查阅Webpack代码分割指导。你的Webpack配置应该相似这种。

若是使用Babel，你须要确保Babel可以解析动态import语法而不是转换它。能够经过babel-plugin-syntax-dynamic-import.了解相关知识。

React.lazy

注意： React.lazy和Suspense技术目前还不支持服务端渲染。若是你想要对在服务端渲染的应用进行代码分割，咱们推荐使用Loadable Components。它有一个很棒的服务端渲染打包指南。

React.lazy功能让你把动态import做为常规组件渲染。

以前：

import OtherComponent from './OtherComponent';
复制代码

以后：

const OtherComponent = React.lazy(() => import('./OtherComponent'));
复制代码

当OtherComponent组件第一次被渲染时，包含这个组件的代码包会被自动加载。

React.lazy接收一个函数做为参数，这个函数调用动态import()。他必须返回一个Promise对象resolve包含了React组件的default export模块。

这个懒加载组件以后应该在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 AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}
复制代码

异常捕获边界(Error boundaries)

若是模块加载失败（好比由于网络请求失败致使），这会致使错误。你能够经过异常捕获边界来处理和修复这些异常来给用户一个良好的用户体验。一旦建立了异常捕获边界，你就能够在发生网络异常时经过在懒加载组件层级之上使用它来展现错误状态。

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>
);
复制代码

基于路由的代码分割

在哪里引入代码分割是一个让人头疼的事情。你首先要确保你选择的地方可以均匀地分割代码包，此外还要保证这样作不会影响用户体验。

一个好的选择是在路由中使用它。大部分人都习惯在网页跳转时加载切换过程。因此你能够在这个时候须要从新渲染整个页面，这样用户就不用再切换页面的同时再与其余元素交互了。

下面的例子讲述了如何使用React Router和React.lazy来进行基于路由的代码分割。

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 export。若是你想要引入的模块使用的是命名导出，那么你能够建立一个新的模块做为媒介来从新default export。这能保证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"));
复制代码