Edit

代码拆分（Code Splitting）

与用户使用前下载整个应用程序不同，代码分割允许你将代码分割成小块，然后按需加载。

此项目设置支持通过 动态import() 进行代码拆分。 它是在第3阶段的 提案 。 import() 函数表单接受模块名作为参数，并返回一个Promise ，该 Promise 总是 resolves 到模块的命名空间对象。

示例：

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 及其所有唯一依赖项成为一个单独的块，仅在用户单击 'Load' 按钮后加载。 有关创建的块的更多信息，请参阅生产构建 部分。

如果你愿意，也可以使用 async / await 语法。

使用 React Router

如果你使用的是 React Router ，请查看 这个教程 ，了解如何使用它进行代码分割。 你可以在 此处 找到随附的 GitHub 仓库。

另请参阅 React 文档中的 代码拆分(Code Splitting) 部分。

← PreviousNext →