コード分割

コードの分割は、アプリケーション開発の世界では、一般的な実践ですが、基本的には、巨大なバンドル/パッケージを小さな塊に分割し、必要なときにだけダウンロードして現象です.

問題声明

我々の問題の説明を説明するには、我々は、ユーザーがログインページにあるアプリの例を取ることができると、これは有効なユーザーではない可能性があるか、彼は、ログインプロセスを完了することはできませんし、私のアプリに入力することができない場合でも、有効なユーザーです.両方のケースでは、我々は、これが悪いユーザーの経験だけでなく、より少ない実行中のアプリケーションで結果ができるという事実を考慮せずに我々のアプリのすべてをダウンロードしてユーザーを望んでいる.
コード分割技術は1つの移動でアプリケーション内のすべてのファイルをダウンロードしての面倒を回避するのに役立ちます、ルートファイルはすぐにダウンロードすることができますし、追加のスクリプトは、ページやアプリケーションの後に';怠惰なロードに設定されているインタラクティブなので、全体的なパフォーマンスとユーザーエクスペリエンスを向上させます.
また、アプリケーションの性質に応じてコンポーネントを追加し続けるように、アプリケーションを処理することもできます.
コード分割によって、コードの量を同じように保つことができ、ユーザーによって要求される行を読み込むことができます.

ダイナミックインポート

コード分割を実装する1つの方法は、動的インポートによるものです.その代わりに、

import { data } from './data';

console.log(data);

Webpackによって自動的に分割される以下の構文を実装できます.

import("./data").then(data => {
  console.log(data);
});

反応する。怠惰な

' lazy 'は、Lazyにコンポーネントを取得するのに役立つコマンドです.例えば、以下のように怠惰な負荷に製品ページを設定することができます.

const ProductsPage = lazy (()=>import('../pages/products'))

反応する.lazyはdynamic import ()をコールするコールバック関数をとります.これは、反応コンポーネントを含むデフォルトのエクスポートを持つモジュールに解決する約束を返さなければなりません.
次に、遅延コンポーネントをサスペンスコンポーネント内に描画する必要があります.これにより、遅延コンポーネントの読み込みを待機しています.

import React, {lazy, Suspense } from 'react';

const Products = lazy(() => import('./Products'));

function Main() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Products />
      </Suspense>
    </div>
  );
}

複数の遅延コンポーネントを単一のサスペンスコンポーネントでラップすることもできます.
コードの分割は、我々の反応アプリをはるかに高速かつ効率的なたびにブラウザは、それが全体のコンポーネントを再度ダウンロードされませんので、ちょうどキャッシュから取得し、瞬時に実行されますリフレッシュされます.
それはあなたのアプリケーションのコード分割を導入する場所を決定することが重要です.あなたが均等にバンドルを分割する場所を選択することを確認したいが、ユーザーエクスペリエンスを中断されません.

ルートのコード分割

'コードの分割'実装を開始する良い場所はルートです.Web上のほとんどの人がロードするために時間のいくつかの量を取ってページ遷移に使用されます.また、あなたのユーザーが同時にページ上の他の要素と相互作用することがないように、一度に全体のページを再描画する傾向があります.
以下はRadioルータを使用した遅延負荷の使用例です.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const Products = lazy(() => import('./routes/Products'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<Products />} />
      </Routes>
    </Suspense>
  </Router>
);

また、いくつかのモジュールがいくつかの問題のためにロードに失敗した場合、エラーがうまく起動することができます.これらのエラーは、開発者が問題の根本原因を見つけるのに役立ちますし、また、良いユーザーエクスペリエンスを提供するために便利です.

避けて滝

階層で動くコード/コンポーネントを分割している間、非常に慎重であることは重要です.
たとえば、ルートレベルでコード分割するときに、ルートが遅延負荷になるが、ルート自体が2/3のコンポーネントを読み込みますが、その一方が再び遅延してロードされ、そのコンポーネントが再度ロードされていることもあります.

この状況を避けるために、以下の点を利用できる.

怠惰なローディングと

を使用している間、あなたが非常に非常にスマートであることを確認してください

また、JavaScriptの'リソースの最適化'を使用することができます'プリロード'と'プリフェッチ'タグは、私たちは、いくつかの時点で怠惰ロードされることを知っているページ/コンポーネントのリソースを要求するブラウザを指示します.

私はこの日の終わりにそれはすべてのユーザーを幸せにし、コードの分割を達成するための1つの方法であることを強調して、この記事を終了します.

ハッピーコーディング.