代码分割

代码分割允许你将代码分割成小块，然后按需加载，而不是在用户可以使用应用之前下载整个应用。

此项目设置通过 动态 import() 支持代码分割。它的 提案 处于第 4 阶段。import() 函数式形式以模块名称作为参数，并返回一个 Promise，该 Promise 始终解析为模块的命名空间对象。

以下是一个示例

moduleA.js

const moduleA = 'Hello';

export { moduleA };

App.js

import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    import('./moduleA')
      .then(({ moduleA }) => {
        // Use moduleA
      })
      .catch(err => {
        // Handle failure
      });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Load</button>
      </div>
    );
  }
}

export default App;

这将使 moduleA.js 及其所有唯一依赖项作为单独的块，只有在用户点击“加载”按钮后才会加载。有关创建的块的更多信息，请参阅 生产构建 部分。

如果你喜欢，也可以使用 async / await 语法。

使用 React Router

如果你使用的是 React Router，请查看 本教程

还可以查看 React 文档中的 代码分割 部分。