React Code-Splitting

翻译至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 (
    

      
    
  );
}

After:

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

function MyComponent() {
  return (
    

      
    
  );
}

当这个组件渲染完成后，它会自动加载包含OtherComponent这个组件的bundle。
React.lazy必须使用dynamic import()方法。它会返回一个Promise，当它resolve时，它会返回一个默认导出的React组件模块。

Suspense

如果我们自定义的组件MyComponent渲染时，这个包含OtherComponent的模块并没有加载，我们必须在加载过程中展示一些过渡内容--比如加载进度条。我们可以使用Suspense来完成这个事。

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

function MyComponent() {
  return (
    

      Loading...
}>
        
      
    

); }

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 (
    

      Loading...
}>
        

          
          
        
      
    

); }

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 = () => (
  

    
      Loading...
}>