TIL/20210820

📌今日やったこと

再創造再創造🔎

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