どのように怠惰負荷をあなたの反応アプリ🥱

この記事では、我々はどのように我々は、ユーザーが時間内に任意の時点で必要なJavaScriptをロードすることによって我々のアプリのパフォーマンスを向上させることができる方法について議論するつもりです、彼らがダウンロードして、ページの負荷で実行するコードの量を減らすと、アプリケーションを対話的に高速化.😎 クールじゃない?
我々は、反応を使用します.ボタンがクリックされるまで、KendoreactのStockChartのような複雑なコンポーネントの読み込みを遅らせるために怠惰でサスペンス.

動的輸入の理解
代わりに、最初のページの負荷に我々のアプリのすべてのコードを使用して大きな束を送信すると、我々は徐々にユーザーがアプリケーションと対話するように小さな束を送信することができます.これをするために、我々はダイナミックな輸入と呼ばれている現代のJavaScript機能に頼ります.動的なインポートは、必要なモジュールがネットワーク上で転送され、Javascriptエンジンによって解析され、実行されると解決される約束を返します.
静的インポートは次のようになります.

import { concat } from "./utils";

console.log(concat("A", "B", "C"));

動的インポートは以下のようになります.

import("./utils").then(utils => {
  console.log(utils.concat("A", "B", "C"));
});

CREATEのようなツールは、アプリケーションとWebPackがこれらのダイナミックなインポートでしようとしていることを理解して、これらの怠惰な装束束のために別々のJavaScriptファイルを出力するでしょう.Webpackを自分で設定しているなら、コード分割に関するWebpackのドキュメントを読むのに時間を費やすのは良い考えかもしれません

反応による怠惰な読み込み.怠惰とサスペンス
バージョン16.6から始まって、反応はビルトイン反応を含みます.動的なインポートを使用して遅延負荷コンポーネントにアプリケーションを分割することは非常に簡単に怠惰な関数です.
次のようにします.

import StockChartContainer from "./StockChartContainer";

これを:

const StockChartContainer = lazy(() => import("./StockChartContainer"));

そして、私たちが最初にそれをレンダリングしようとするとき、反応は我々のStockChartContainer成分を含んでいる束を自動的にロードします.
この怠惰なコンポーネントをサスペンスコンポーネントの中に包んでおきたいのですが、これは、物事がロードされている間にいくつかのフォールバックコンテンツを表示できるようにします.のように見えます.

例
この例では、KendoreactのStockChartを含む複雑なコンポーネントを読み込みますが、ユーザーがボタンをクリックした後にのみ実行されます.この方法では、最初のロードで必要なユーザーより多くのコードを送信しないようにします.
状態を保存し、複雑なコンポーネントを表示する必要があるかどうかを確認します.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showChart: false
    };
  }
}

次に、ユーザーがボタンをクリックしたときに状態をトグルするhandleclick関数を実装します

class App extends Component {
  // ...

  handleClick = () => {
    this.setState(prevState => ({
      showChart: !prevState.showChart
    }));
  };
}

ここでは、Renderメソッドでまとめます.

const StockChartContainer = lazy(() => import("./StockChartContainer"));

class App extends Component {
  // ...

  render() {
    const { showChart } = this.state;
    const buttonText = showChart ? "Hide Stock Chart" : "Show Stock Chart";
    const chartComponent = showChart ? <StockChartContainer /> : null;
    const loadingComponent = <div>Loading...</div>;

    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Stock Chart</h1>
          <div className="App-button">
            <Button primary={true} onClick={this.handleClick}>
              {buttonText}
            </Button>
          </div>
        </header>
        <div className="App-chart">
          <Suspense fallback={loadingComponent}>{chartComponent}</Suspense>
        </div>
      </div>
    );
  }
}

結論
我々が我々のユーザーにあまりに多くのJavaScriptを送るならば、我々はブラウザーの主な糸を忙しくします、そして、それはユーザーインタラクションに応じることができません.最初のページの負荷に必要なされていない我々のアプリの怠惰な負荷のコンポーネントは、ブラウザがしなければならない仕事の量を減らすために、私たちの時間をダウンしてインタラクティブに、私たちのユーザーには、特にモバイルデバイス上でより良い経験を提供します.反応する.怠惰とサスペンスはとても簡単に我々は本当に言い訳がないことを行う!😎