React.lazyを利用してJavaScriptファイルを分割ロード

Reactでは作成したアプリケーションはwebpackにより全てのコードが1つのJavaScriptファイルにバンドルされます。

小さなアプリケーションならよいですが大きなアプリケーションですと初期表示に読み込むJSファイルが増加していく問題を抱えています。

React.lazy は JavaScriptファイルを分割して利用しているコンポーネントが呼び出されたタイミングでロードするための機能です。

React.lazyの利用

次のように記述すると遅延読み込み用のコンポーネントが作成されます。

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

React.lazyはReact.Suspense と一緒に利用して、このコンポーネントが呼び出されたタイミングで通信を行いコンポーネントファイルを取得します。

const MyComponent = () => {
  return (
    <React.Suspense fallback={null}>
      <div>
        <SomeComponent />
      </div>
    </React.Suspense>
  );
}

React.Suspenseのfallback属性にはファイルの読み込み時に表示したいコンポーネントを指定することができ、表示が不要ならnullを指定します。

多くのケースではReact Routerなどと合わせて、ページごとに読み込みを行うと不要なコンポーネントの情報を読み込まずにページの描画が可能になんるでしょう。

React Routerとの利用方法

React Routerと利用する場合にはRouterコンポーネントとSwitchコンポーネントの間にSuspenseを記述して利用を行います。

import React, {lazy,Suspense} from 'react';
import { BrowserRouter as Router, Route, Switch  } from 'react-router-dom';
  
const HomeComponent  = () => <div>home</div>
const Page1Component = lazy(() => import('./Page1Component'));
const Page2Component = lazy(() => import('./Page2Component'));
  
const LoadingComponent  = () => <div>Loading...</div>
  
function App() {
  return (
    <Router>
      <Suspense fallback={LoadingComponent}>
        <Switch>
          <Route path="/" exact component={HomeComponent} />
          <Route path="/page1" component={Page1Component}/>
          <Route path="/page1" component={Page2Component}/>
        </Switch>
      </Suspense>
    </Router>
  );
}
export default App;

関連エンントリー

ReactのSyntheticEventとDebounce
ReactのContext APIを利用してコンポーネント間の情報を共有

スポンサードリンク

«WordPressのRest APIのユーザー情報に項目を追加する | メイン | GatsbyJSで "WebpackError: ReferenceError: IDBIndex is not defined"とエラーが出た場合の対処方法»