TIL/20210820

4589 ワード

TIL テキストリンク

📌今日やったこと

再創造再創造🔎

React.lazyを用いてコード分割を行った.

コード分割を導入する場所は特定されていないが,ルーティングに基づいてコード分割を行った.ページ読み込み時間は、ほとんどのページが1回のレンダリングであるため、ユーザーはページをレンダリングするときに他の要素とインタラクティブにならないため、ページ切り替え時にある程度変化します.



const Main = lazy(() => import("./pages/Main"));
const Test = lazy(() => import("./pages/Test"));

const code = process.env.REACT_APP_VERSION_CODE;
function App(props) {
  return (
    <React.Fragment>
      <Suspense fallback={<LoaderWrap><Loader/></LoaderWrap>}>
        <ConnectedRouter history={history}>
            <Route path="/" exact component={Main}/>
            <Route path="/test" component={Test}/>
        </ConnectedRouter>
      </Suspense>
      <GlobalStyle/>
    </React.Fragment>   
  );
}

このタイプの懸念を用いてコード分割を行う.
fallbackpropは、エレメントのロードを待つときにレンダリングするreact要素を受け入れ、ロード中にロードプログラムを出力します.

📌 参考資料

suspense lazy : https://ko.reactjs.org/docs/code-splitting.html

Reference

この問題について(TIL/20210820), 我々は、より多くの情報をここで見つけました https://velog.io/@jeongyunjang/TIL-20210820

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

非プロフェッショナルコード9,10週JavaScript同期と非同期の学習

RXJSとメディアクエリを使用して観測可能な独自のダークモード検出を作成する