レイジー遅延ロード早期導入は、16.6を反応させます

転載： https://juejin.im/post/5bd70def6fb9a05d38282c30

新機能をリリース16.6に反応し  lazy 、そしてコンポーネント Suspense

ここでは、自分の利用状況を見て

まず、の2つのコンポーネントLazyTest.1とLazyTest.2、同じコンテンツを作成してみましょう

インポートが反応、{コンポーネント}から'反応する' 

エクスポートデフォルトクラスLazyTestが延びコンポーネント{ 
  レンダリング（）{ 
    リターン（
       <DIV> 
        <H1> LazyTest组件</ H1> 
      </ div>     ）。
  } 
}

怠惰な分布は、次にアプリ入口JSの形で導入されます

インポートは、「反応」から、{コンポーネント、怠惰、サスペンス}を反応させ; 

CONST LazyTest1 =怠惰（（）=>インポート（」./成分/ LazyTest.1' ））; 
CONST LazyTest2 =怠惰（（）=>インポート（」./成分/ LazyTest.2' ））; 

クラスアプリケーションはコンポーネントを拡張{ 
  フォールバック =（）=> {
     リターン（
       <DIV>読み込み... </ div>
    ）。
  } 

  レンダリング（）{ 
    リターン（
       <DIV> 
        <サスペンス代替= { この .fallback（）}> 
          <H1>懒加载组件</ H1> 
          <LazyTest1 /> 
          <LazyTest2 /> 
        <
    ）; 
  } 
} 

輸出デフォルトのApp。

Suspense 外側のコンポーネントがどこ遅延読み込み、配置することができfallback 、負荷遷移中に遅延ロードアセンブリ、または遷移効果は、いくつかの方法を置くことができます。

ここでは、パックから抜け出すために見ます

単一のパッケージに達したLazyTest.1とLazyTest.2。

非常に便利なああではない、あなたはそれを試して来ます！

注：React.lazyと  Suspense 学生は、サーバー側が公式のレンダリングまたは推奨を行う場合は、サーバ側にまだ利用できない  ロード可能に反応