程式碼拆分

程式碼拆分讓您可以將程式碼拆分成小塊，然後依需要載入，避免使用者在使用應用程式之前必須下載整個應用程式。

這個專案設定支援使用 動態 import() 來執行程式碼拆分。其 提案 已進入第 4 階段。類似函數的 import() 函數會將模組名稱當作引數，傳回一個 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 文件中的 程式碼拆分 章節。