React.lazyについての調査 - ぶうううん's Cafe

React.lazyとは

Docsには次のように書いてあります。^[1]

React.lazy 関数を使用すると、動的インポートを通常のコンポーネントとしてレンダーすることができます。

ここでいう動的インポートとは、次のようにimport文を利用した通常のインポートのこと。

import SampleComponent from './SampleComponent';

Ract.lazyを利用すると、次のように記述することができるとのこと。

const SampleComponent = React.lazy(() => import('./SampleComponent'));

React.lazyのメリット

React.lazyを利用することで、初回レンダリング時に全てをインポートする必要がなくなり、インポートを必要とするときに初めて読み込むということが可能になる。

React.lazyの適用箇所

React.lazyを利用したコード分割には、ルーティング単位でのコード分割が良いとのこと。^[2]

コード分割を導入するにあたって適している場所はルーティングです。Web を使用するほとんどの人は、多少のロード時間がかかるページ遷移に慣れています。また、ユーザがページ上の他の要素を同時に操作する可能性を減らすよう、ページ全体を一度に再レンダーすることが多いでしょう。

以下のようなコードがあった場合、問い合わせページ(inquity)では商品ページ(products)のコンポーネントは不要なので、問い合わせページに遷移した際は商品ページのコンポーネントは読み込まずに済む。

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

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

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

References

[1][2]. React Organization：コード分割、React Docs、入手先 < https://ja.reactjs.org/docs/code-splitting.html > (参照2023-01-31)