NEW ARTICLE
PHPエラー『Fatal Error: Maximum Execution Time Exceeded』の解決方法
  1. HOME
  2. React
  3. ReactでのLazy LoadingとCode Splittingの実践

ReactでのLazy LoadingとCode Splittingの実践

ReactでのLazy LoadingとCode Splittingの実践

ReactアプリケーションにLazy LoadingとCode Splittingを導入することで、パフォーマンスを向上させ、初回読み込み時間を短縮できます。これにより、ユーザー体験が大幅に向上します。

目次

Lazy LoadingとCode Splittingの違い

Lazy Loadingは必要なリソースだけをロードする手法で、Code Splittingはアプリケーションを小さなチャンクに分割してロードする技術です。

Code Splittingの基本

Reactでは`React.lazy`と`Suspense`を使用してコンポーネント単位でコードを分割できます。

import React, { Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

動的インポートとは

JavaScriptの`import()`関数を使用して動的にモジュールを読み込みます。

const module = await import('./myModule');

React.lazyの仕組み

`React.lazy`を使用して、動的インポートをReactコンポーネントとして扱います。

Suspenseを活用したフォールバック

コンポーネントの読み込み中に`Suspense`を使用してフォールバックUIを表示します。

React Routerとの組み合わせ

React Routerを使用してページ単位でコード分割を行います。

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

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

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

エラーハンドリング

`ErrorBoundary`を使用して、読み込みエラーを処理します。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

WebPackでのCode Splitting

Webpackの`splitChunks`オプションを活用して、コードを自動的に分割します。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

ルートベースのLazy Loading

ルート単位でコンポーネントを遅延ロードします。

Lazy Loading画像とメディア

画像やメディアファイルもLazy Loadingで最適化できます。

<img src="image.jpg" loading="lazy" alt="Lazy Loaded Image" />

パフォーマンスの測定

Chrome DevToolsやLighthouseを使用してLazy LoadingとCode Splittingの効果を測定します。

ベストプラクティス

Lazy Loadingの頻度やコンポーネントの粒度に注意し、ユーザーエクスペリエンスを損なわないように調整します。

CI/CDでのビルド最適化

ビルド時にCode Splittingが適切に動作しているかを確認し、自動化パイプラインに統合します。

SSR（サーバーサイドレンダリング）との相性

Next.jsやGatsbyなどのフレームワークでは、SSRとLazy Loadingを併用してパフォーマンスを最大化できます。

まとめ

ReactでLazy LoadingとCode Splittingを実践することで、初回ロード時間を短縮し、効率的にリソースを管理できます。これにより、大規模アプリケーションでも高いパフォーマンスを維持できます。