MENU
  1. ホーム
  2. React
  3. Reactアプリの初期ロード時間を短縮するコードスプリッティングのベストプラクティス

Reactアプリの初期ロード時間を短縮するコードスプリッティングのベストプラクティス

React

アプリケーションの初期ロード時間は、ユーザー体験において極めて重要です。特に、Reactで構築されたアプリでは、コンポーネントやライブラリの増加に伴い、バンドルサイズが肥大化し、ロード時間が延びる傾向があります。こうした課題を解決する有効な手法の一つが「コードスプリッティング」です。コードスプリッティングを適切に実施することで、ユーザーが最初に必要とするリソースだけを効率的にロードし、アプリの応答性を大幅に向上させることが可能です。本記事では、Reactを使用したコードスプリッティングの基本から応用までを詳しく解説し、実践に役立つ具体的な方法を紹介します。

目次

コードスプリッティングとは


コードスプリッティングは、アプリケーションのコードを小さなチャンク（塊）に分割し、必要な部分だけを遅延ロードする技術です。このアプローチにより、アプリの初期ロード時間が短縮され、ユーザー体験が向上します。

なぜコードスプリッティングが重要なのか


アプリケーション全体のコードを一度にロードする従来の方法では、以下のような課題が生じます。

  • ロード時間の増加：アプリが複雑になるにつれて、JavaScriptバンドルサイズが大きくなり、ロード時間が長くなります。
  • リソースの無駄：初期表示時に不要な機能やコンポーネントを含むため、帯域幅の無駄遣いになります。

コードスプリッティングを使用することで、これらの課題を解決し、ユーザーに素早い応答を提供できます。

コードスプリッティングの仕組み


コードスプリッティングでは、次のような方法でコードを分割します：

  • エントリーポイントの分割：初期ロード用のエントリーポイントを最低限に絞ります。
  • ルートベースの分割：ページやルートごとにコードを分割し、ユーザーが訪れる際にロードします。
  • コンポーネント単位の分割：特定のコンポーネントだけを動的にロードします。

この分割により、必要なコードのみを効率的にロードすることが可能になります。

Reactでコードスプリッティングを始める方法

Reactでコードスプリッティングを実施するためには、React自体の機能やツールを活用する必要があります。ここでは、コードスプリッティングの基本的な実装手順を説明します。

プロジェクトの準備


コードスプリッティングを開始する前に、以下の点を確認してください：

  1. 最新のReactバージョン：React 16.6以降では、React.lazyやSuspenseが利用可能です。
  2. ビルドツールの確認：Create React App（CRA）を使用している場合、Webpackが既に統合されています。その他のビルド環境では、WebpackやViteなどを設定する必要があります。

コードスプリッティングの実装

1. React.lazyを使用してコンポーネントを遅延ロード

React.lazyを利用すると、特定のコンポーネントを動的にインポートして遅延ロードできます。

import React, { Suspense } from 'react';

// 動的にインポートするコンポーネント
const LazyComponent = React.lazy(() => import('./LazyComponent'));

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

export default App;
  • React.lazy: コンポーネントを遅延ロードするための関数です。
  • Suspense: 遅延ロード中のローディングUIを指定します。

2. ルートごとのコードスプリッティング

ルート単位でコードを分割する場合、React.lazyとReact Routerを組み合わせて実装します。

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

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

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

この例では、HomeとAboutコンポーネントがルートごとに動的ロードされます。

動的インポートの注意点

  • 遅延ロード時には短時間の読み込み遅延が発生するため、適切なローディングUIを提供することが重要です。
  • 必要に応じて、ErrorBoundaryを追加してエラーハンドリングを行いましょう。

これで、Reactでのコードスプリッティングを始める基本的な準備が完了します。次のステップでは、React.lazy以外の手法やWebpackを用いた高度な分割について詳しく見ていきます。

React.lazyとSuspenseの活用

Reactでコードスプリッティングを効果的に行うための主要なツールとして、React.lazyとSuspenseがあります。これらを正しく活用することで、アプリの初期ロード時間を大幅に短縮できます。

React.lazyの基本的な使い方


React.lazyを使用することで、必要なコンポーネントを動的にロードできます。これにより、不要なコードの読み込みを防ぎ、アプリのパフォーマンスを向上させます。

以下は、基本的な実装例です：

import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <h1>コードスプリッティングのデモ</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;
  • React.lazy: コンポーネントを動的にロードするための関数です。
  • Suspense: ロード中に表示されるフォールバックUIを設定します。

Suspenseの詳細と実践的な活用


Suspenseは、React.lazyで遅延ロードしているコンポーネントが読み込まれるまでの間、フォールバックUIを表示する役割を果たします。

フォールバックUIのカスタマイズ

Suspenseでは、シンプルなテキストだけでなく、スピナーやアニメーションを用いた高度なUIも実装可能です。

<Suspense fallback={<CustomLoader />}>
  <LazyComponent />
</Suspense>

ここでCustomLoaderは以下のようなスピナーコンポーネントです：

function CustomLoader() {
  return <div className="spinner">Loading...</div>;
}

React.lazyとSuspenseの制約

  • サーバーサイドレンダリング（SSR）: 現時点では、React.lazyはSSRで直接使用できません。そのため、Next.jsなどを使ったSSR環境では別のコードスプリッティング手法が必要です。
  • エラーハンドリング: React.lazyを使用した場合、読み込み中のエラーをキャッチするためにErrorBoundaryを追加する必要があります。

エラーハンドリングの例：

import React, { Suspense } from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

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

  render() {
    if (this.state.hasError) {
      return <div>エラーが発生しました。</div>;
    }
    return this.props.children;
  }
}

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

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

export default App;

React.lazyとSuspenseを組み合わせる効果


これらの機能を活用することで、以下の効果を得られます：

  • 初期ロード時間の短縮
  • 必要な部分のみロードする効率化
  • よりスムーズなユーザー体験

次のセクションでは、動的インポートの応用例とその利点について詳しく見ていきます。

動的インポートの利点と活用例

動的インポートは、JavaScriptのimport()関数を使用してコードを必要なタイミングでロードする技術です。Reactアプリにおいて、動的インポートを活用することで、パフォーマンスの最適化と柔軟な機能実装が可能になります。

動的インポートの基本的な利点

  1. 初期ロード時間の短縮
    必要なコードだけをロードすることで、アプリの初期バンドルサイズを削減します。
  2. 条件付きロード
    特定の条件に基づいてコードを動的に読み込むことが可能です。これにより、リソースの効率的な利用が実現します。
  3. コードの分離と再利用
    アプリの各部分を分割し、再利用可能なモジュールとして管理することで、保守性が向上します。

Reactでの動的インポートの活用例

条件付きロードの実装

以下の例では、特定のボタンがクリックされたときにのみモジュールをロードします。

import React, { useState } from 'react';

function App() {
  const [Component, setComponent] = useState(null);

  const handleClick = async () => {
    const { default: LoadedComponent } = await import('./LazyLoadedComponent');
    setComponent(() => LoadedComponent);
  };

  return (
    <div>
      <h1>動的インポートのデモ</h1>
      <button onClick={handleClick}>コンポーネントをロード</button>
      {Component && <Component />}
    </div>
  );
}

export default App;

コンポーネントごとの分割

特定の機能を持つコンポーネントを動的にロードすることで、効率的なコード管理を実現します。

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

function Dashboard() {
  return (
    <Suspense fallback={<div>Loading Chart...</div>}>
      <ChartComponent />
    </Suspense>
  );
}

ルートごとの動的インポート

React Routerを使用してページ単位でコードを分割する例です。

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

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

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/profile" component={Profile} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

動的インポートの応用例

  1. ダッシュボードアプリケーション
  • ユーザーの役割やアクセス権に基づいてモジュールを動的にロードします。
  • 例: 管理者向けの機能はログイン後にのみロード。
  1. 多言語対応アプリ
  • ユーザーが選択した言語に応じて翻訳ファイルを動的にロードします。
const loadLocaleData = async (locale) => {
  const { default: messages } = await import(`./locales/${locale}.json`);
  return messages;
};
  1. 分析やグラフ描画ツール
  • ユーザーがデータを閲覧する際に、グラフ描画用ライブラリを遅延ロード。

動的インポートの注意点

  • ローディングUIの適切な設定: 遅延ロード中のユーザー体験を損なわないよう、ローディングインジケータを表示します。
  • エラーハンドリングの実装: モジュールがロードされない場合に備えて、例外処理を加えます。

これらの手法を活用することで、Reactアプリの効率性と柔軟性をさらに高めることができます。次のセクションでは、Webpackを使用した高度なコードスプリッティング手法について解説します。

Webpackでのコードスプリッティング

Webpackは、Reactアプリケーションのビルドツールとして広く使用されており、コードスプリッティングをサポートしています。Webpackを活用することで、アプリケーションのバンドルサイズを効果的に管理し、ロード時間を最適化できます。

Webpackでコードスプリッティングを実現する方法

1. エントリーポイントの分割

Webpackでは、複数のエントリーポイントを設定することで、コードを分割できます。

webpack.config.jsの設定例：

module.exports = {
  entry: {
    main: './src/index.js',
    admin: './src/admin.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist',
  },
};

この設定により、mainとadminの2つのバンドルが生成され、それぞれ必要なタイミングでロードされます。

2. 動的インポート

Webpackは、JavaScriptのimport()関数を利用してコードを分割できます。Reactアプリケーションでも有効です。

例：動的インポートを使用してモジュールを分割

function loadComponent() {
  import('./LargeComponent')
    .then((module) => {
      const Component = module.default;
      // コンポーネントを使用
    })
    .catch((error) => {
      console.error('モジュールのロードに失敗しました', error);
    });
}

Webpackはimport()関数を検知し、自動的に別バンドルとして分割します。

Webpackのプラグインを活用したコードスプリッティング

1. SplitChunksPluginによる共通モジュールの分割

Webpackには、共通コードを自動的に分割するSplitChunksPluginが組み込まれています。

webpack.config.jsの設定例：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 共通モジュールを自動的に分割
    },
  },
};

この設定により、ライブラリやユーティリティ関数などの共通コードが自動的に分割され、複数のバンドル間で再利用されます。

2. BundleAnalyzerPluginによるバンドルサイズの可視化

WebpackのBundleAnalyzerPluginを使用すると、バンドルサイズを可視化し、最適化のヒントを得ることができます。

インストール：

npm install --save-dev webpack-bundle-analyzer

設定例：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

これにより、ブラウザでバンドルサイズや構成を視覚的に確認できます。

Webpackコードスプリッティングの応用例

1. ライブラリの分割

ReactやReactDOMなどの外部ライブラリを別バンドルとして分割することで、キャッシュ効率を向上させます。

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

2. ページごとのバンドル生成

マルチページアプリケーション（MPA）では、ページごとにエントリーポイントを設定し、不要なコードをロードしないようにします。

module.exports = {
  entry: {
    pageA: './src/pageA.js',
    pageB: './src/pageB.js',
  },
};

注意点とベストプラクティス

  1. バンドルサイズのモニタリング
    バンドルサイズが大きくなりすぎないよう、定期的に確認する習慣をつけましょう。
  2. キャッシュ戦略の導入
    バンドルファイル名にハッシュを追加し、ブラウザキャッシュを効率的に利用します。
output: {
  filename: '[name].[contenthash].js',
},
  1. 適切なコード分割の範囲設定
    過剰にコードを分割すると、リクエスト数が増え、逆にパフォーマンスが低下する場合があります。

Webpackの強力な機能を活用することで、Reactアプリケーションのコードスプリッティングを効率的に行い、ユーザー体験を最適化できます。次は、スプリッティング後の効果測定について解説します。

リアルユーザー環境でのパフォーマンス測定

コードスプリッティングを実施した後、実際のユーザー環境でその効果を測定することは非常に重要です。適切な測定を行うことで、パフォーマンスが向上したか、またはさらなる改善が必要かを確認できます。

パフォーマンス測定の目的

  1. 初期ロード時間の確認
    コードスプリッティング後、初期ロード時間が短縮されたかを評価します。
  2. チャンクロードの最適性評価
    遅延ロードされるコードチャンクが、期待通りに分割・ロードされているかを確認します。
  3. 実際のユーザー体験の向上
    ロード時間の短縮がユーザー体験向上につながっているかをリアルタイムデータで検証します。

パフォーマンス測定ツールの活用

1. Google Lighthouse

Google提供のLighthouseは、初期ロード時間やコードスプリッティングの効果を測定するための強力なツールです。

使用手順：

  1. Chromeブラウザでアプリを開きます。
  2. DevToolsを開き、「Lighthouse」タブを選択します。
  3. モバイルまたはデスクトップモードを選択し、「Generate Report」をクリックします。

主な測定指標：

  • Largest Contentful Paint (LCP): ユーザーに表示される最大のコンテンツのレンダリング時間。
  • Time to Interactive (TTI): ページが完全にインタラクティブになるまでの時間。

2. WebPageTest

WebPageTestは、詳細なパフォーマンスデータを取得できるオンラインツールです。

主な特徴：

  • チャンクファイルのロード順序を確認可能。
  • 地域やネットワーク速度をシミュレートして測定。

3. React Developer Tools

React Developer Toolsは、Reactコンポーネントのロード順序や動的インポートのタイミングを詳細に追跡できます。

使用例：

  • 遅延ロードされたコンポーネントが正しくレンダリングされているかを確認します。

リアルユーザーモニタリング (RUM)

実際のユーザー環境でのデータを収集することで、アプリのパフォーマンスをより正確に把握できます。

RUMツールの例：

1. Google Analytics

  • カスタムイベントを設定して、ロード時間やエラー発生率を追跡します。

2. New Relic

  • サーバーサイドとクライアントサイドの両方のパフォーマンスをモニタリング。

3. Sentry

  • チャンクファイルのロードエラーや遅延をリアルタイムで監視。

実践的なパフォーマンス測定例

以下は、RUMを用いた初期ロード時間の測定コード例です：

window.addEventListener('load', () => {
  const loadTime = performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart;
  console.log(`初期ロード時間: ${loadTime}ms`);
});

このコードを使用して、初期ロード時間が目標値以下であるかを確認します。

パフォーマンス測定時の注意点

  1. 測定条件を統一
    ネットワーク速度やデバイス性能をシミュレートして、一貫した条件で測定を行います。
  2. 複数のツールを併用
    一つのツールだけに頼らず、LighthouseやWebPageTestなど複数のツールを併用して結果を総合的に評価します。
  3. 継続的なモニタリング
    コード変更後も定期的に測定を行い、パフォーマンスが低下していないことを確認します。

リアルユーザー環境でのパフォーマンス測定は、コードスプリッティングの成功を判断する重要なステップです。次のセクションでは、アセットの最適化とキャッシュ管理について説明します。

アセットの最適化とキャッシュ管理

コードスプリッティングによる効果を最大限に引き出すには、分割されたアセットの最適化とキャッシュ管理を徹底する必要があります。これにより、ユーザー体験を向上させつつ、ネットワーク帯域やサーバーリソースの使用効率を高められます。

アセットの最適化

1. JavaScriptファイルの圧縮

Webpackや他のビルドツールを使用して、コードスプリッティングで分割されたJavaScriptファイルを圧縮します。

設定例: Webpackでのコード圧縮

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

Terserは、冗長なコードやコメントを削除してバンドルサイズを削減します。

2. 非同期ロードの活用

分割されたチャンクファイルをasyncやdefer属性を付けてロードすることで、HTMLレンダリングを妨げないようにします。

<script src="main.bundle.js" async></script>

3. 画像やフォントの最適化

アプリで使用する画像やフォントも最適化することで、全体のロード時間を短縮します。

  • 画像: WebP形式や圧縮ツール（ImageOptim、TinyPNGなど）を利用。
  • フォント: 必要なフォントウェイトだけをインクルードするよう設定。

4. Tree Shakingの実行

未使用のコードを自動的に除去するTree Shakingを有効化して、JavaScriptの無駄な部分を削除します。

設定例: WebpackでのTree Shaking

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};

キャッシュ管理

キャッシュ管理は、コードスプリッティングで分割されたファイルを効率的に配信するための重要な要素です。

1. ファイル名にハッシュを追加

バージョン管理やキャッシュの更新を容易にするため、ファイル名にハッシュを付けます。

設定例: Webpackの出力ファイル名

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
  },
};

この設定により、コードが変更されるたびにファイル名が異なるハッシュ値で生成され、ブラウザのキャッシュを適切に更新できます。

2. キャッシュの制御ヘッダーを設定

サーバーでキャッシュポリシーを設定し、リソースの有効期限やキャッシュ動作を制御します。

設定例: Nginxでのキャッシュ制御

location ~* \.(js|css|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot|ico|pdf)$ {
  expires 6M;
  add_header Cache-Control "public";
}

3. サービスワーカーの利用

サービスワーカーを導入することで、キャッシュをより詳細に管理し、オフライン対応も実現できます。

基本的なサービスワーカーの設定例

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/main.bundle.js',
        '/styles.css',
      ]);
    })
  );
});

4. Content Delivery Network (CDN) の使用

CDNを活用して、アセットを地理的に近いサーバーから配信することで、ロード時間をさらに短縮します。

アセット管理のベストプラクティス

  1. 小さなチャンクに分割
    各チャンクが小さくなるように分割し、ロード時間を分散させます。
  2. クリティカルCSSのインライン化
    初期表示に必要なCSSだけをインライン化し、迅速なレンダリングを実現します。
  3. 不要なリソースの削除
    未使用のアセットやライブラリを定期的に確認し、削除します。

まとめ


アセットの最適化とキャッシュ管理を適切に行うことで、コードスプリッティングの効果を最大化できます。これにより、Reactアプリのパフォーマンスが向上し、ユーザー体験の向上につながります。次は、ベストプラクティスと避けるべきミスについて解説します。

ベストプラクティスと避けるべきミス

コードスプリッティングは、Reactアプリのパフォーマンス向上に非常に有効な手法ですが、正しく実施しないと、かえってパフォーマンスを低下させたり、管理が複雑化したりすることがあります。ここでは、Reactにおけるコードスプリッティングのベストプラクティスと、避けるべきミスを解説します。

コードスプリッティングのベストプラクティス

1. 適切なスプリッティング単位を選ぶ

  • ルートベース: ページ単位でコードを分割し、特定のページを訪問した際に必要な部分だけをロードします。
  • コンポーネントベース: 巨大なコンポーネントや特定の機能部分を遅延ロードします。

例:

const LazyComponent = React.lazy(() => import('./HeavyComponent'));
<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>;

2. ローディングUIの工夫

遅延ロード時の空白やカクつきを避けるため、ユーザーに視覚的なフィードバックを与えるローディングUIを設置します。

例: スピナーやプレースホルダーを使用

<Suspense fallback={<Spinner />}>
  <LazyComponent />
</Suspense>;

3. 共通モジュールの分割

複数のバンドル間で再利用されるライブラリやユーティリティは、共通チャンクとして分割しておくと、キャッシュ効率が向上します。

Webpack設定例:

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
      },
    },
  },
};

4. パフォーマンスモニタリングを継続的に実施

コードスプリッティングの効果を定期的に測定し、必要に応じて調整を行います。Google LighthouseやWebpack Bundle Analyzerを活用しましょう。

避けるべきミス

1. 過剰な分割

コードを細かく分割しすぎると、HTTPリクエストの数が増加し、逆にパフォーマンスが低下します。適度な分割を心がけましょう。

2. 初期ロードへの依存

初期ロードに必要なリソースをすべて遅延ロードにしてしまうと、アプリが動作を開始するまでに時間がかかります。重要な部分はバンドルに含めておきましょう。

3. キャッシュ管理の欠如

ハッシュ付きファイル名を使用しないと、ブラウザが古いキャッシュを使用し、最新のコードが反映されない場合があります。

4. エラーハンドリングの不備

動的インポートやReact.lazyでエラーが発生した際のハンドリングがないと、ユーザーに不親切な体験を与えます。

例: エラーバウンダリを設定

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

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

  render() {
    if (this.state.hasError) {
      return <div>エラーが発生しました。</div>;
    }
    return this.props.children;
  }
}

5. 不必要な依存ライブラリの分割忘れ

外部ライブラリをバンドルに含めてしまうと、バンドルサイズが肥大化します。共通ライブラリを別チャンクとして分割するのを忘れないようにしましょう。

まとめ


コードスプリッティングは、適切に実施することでReactアプリのパフォーマンスを大幅に向上させます。ただし、過剰な分割やエラーハンドリングの不足などのミスを避け、効果的な分割を心がけることが成功の鍵です。次のセクションでは、記事の内容をまとめて振り返ります。

まとめ

本記事では、Reactアプリの初期ロード時間を短縮するためのコードスプリッティングのベストプラクティスを解説しました。コードスプリッティングは、アプリケーションを小さなチャンクに分割して必要なタイミングでロードする技術であり、初期ロード時間の短縮やユーザー体験の向上に非常に効果的です。

具体的には、React.lazyとSuspenseを活用した基本的な手法から、Webpackを用いた高度なコード分割、アセットの最適化とキャッシュ管理、さらに実際のユーザー環境でのパフォーマンス測定までを網羅しました。また、ベストプラクティスを実践し、避けるべきミスを理解することで、効率的かつ効果的なコードスプリッティングが可能になります。

Reactアプリのパフォーマンスを最大化するために、本記事の内容を参考に、実際のプロジェクトにコードスプリッティングを取り入れてみてください。適切な実装により、スムーズでレスポンスの良いアプリケーションを提供できるようになります。

React
パフォーマンス最適化 React コードスプリッティング

コメント

コメントする

目次