Web アプリケーションが複雑になるにつれて、スケーラブルで保守可能なアーキテクチャの必要性が最も重要になります。マイクロ フロントエンドは、モノリシック フロントエンド アプリケーションをより小さく管理しやすい部分に分割することでソリューションを提供します。この投稿では、マイクロフロントエンドの概念、React を使用してマイクロフロントエンドを実裝する方法、開発プロセスにマイクロフロントエンドがもたらす利點について説明します。

マイクロフロントエンドとは何ですか?

マイクロフロントエンドは、マイクロサービス アーキテクチャをフロントエンドまで拡張します。単一のモノリシック アプリケーションの代わりに、マイクロ フロントエンドを使用すると、アプリケーションの個々の機能やセクションを個別に開発およびデプロイできます。各チームはアプリケーションの特定の部分を所有できるため、拡張性と保守性が向上します。

マイクロフロントエンドの主な特徴:

獨立して展開可能: 各マイクロフロントエンドは獨立して開発、テスト、展開できます。
テクノロジーに依存しない: チームは、異なるマイクロフロントエンドに対して異なるテクノロジーを選択できるため、柔軟性が得られます。
チームの自律性: チームは獨立して作業(yè)できるため、依存関係やボトルネックが軽減されます。

マイクロフロントエンドを使用する理由

スケーラビリティ: アプリケーションの成長に合わせて、マイクロフロントエンドを使用すると、複數(shù)のチームにわたって開発を拡張できます。
開発の高速化: 獨立した展開により、リリース サイクルが短縮され、市場投入までの時間が短縮されます。
保守性の向上: コードベースが小さいほど、管理、テスト、リファクタリングが容易になります。

React を使用したマイクロフロントエンドの実裝

• マイクロフロントエンド アーキテクチャを選択してください マイクロフロントエンドを実裝するには、いくつかのアプローチがあります。ここでは 2 つの一般的な方法を紹介します:

iframe ベース: 各マイクロフロントエンドは iframe にロードされます。このアプローチは強力な分離を提供しますが、コミュニケーションとスタイルに問題が生じる可能性があります。

JavaScript バンドル: 各マイクロフロントエンドは、単一のアプリケーションにロードされる個別の JavaScript バンドルです。このアプローチにより、より適切な統(tǒng)合と共有狀態(tài)管理が可能になります。

• マイクロフロントエンド アプリケーションのセットアップ JavaScript バンドルのアプローチを使用して簡単な例を作成してみましょう。異なるアプリケーション間でコードを共有できる強力な機能である Webpack モジュール フェデレーションを使用します。

ステップ 1: 2 つの React アプリケーションを作成する
2 つの別個の React アプリケーションを作成します。1 つはホスト用、もう 1 つはマイクロフロントエンド用です。

npx create-react-app host-app
npx create-react-app micro-frontend

ステップ 2: Webpack モジュール フェデレーションを構成する
マイクロフロントエンド アプリケーションで、必要な依存関係をインストールします。

npx create-react-app host-app
npx create-react-app micro-frontend

次に、webpack.config.js を変更して、マイクロフロントエンド コンポーネントを公開します。

npm install --save-dev webpack webpack-cli webpack-dev-server @module-federation/webpack

ホストアプリで、マイクロフロントエンドを使用するように設定します。

// micro-frontend/webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: "micro_frontend",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/Button", // Expose the Button component
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

ステップ 3: マイクロフロントエンドをロードする
ホストアプリで、マイクロフロントエンドコンポーネントを動的にロードできるようになりました:

// host-app/webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        micro_frontend: "micro_frontend@http://localhost:3001/remoteEntry.js",
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

• アプリケーションを実行する 必ず両方のアプリケーションを異なるポートで実行してください。たとえば、マイクロフロントエンドをポート 3001 で実行し、ホスト アプリをポート 3000 で実行できます。

// host-app/src/App.js
import React, { useEffect, useState } from "react";

const App = () => {
  const [Button, setButton] = useState(null);

  useEffect(() => {
    const loadButton = async () => {
      const { Button } = await import("micro_frontend/Button");
      setButton(() => Button);
    };
    loadButton();
  }, []);

  return (
    <div>
      <h1>Host Application</h1>
      {Button ? <Button label="Click Me!" /> : <p>Loading...</p>}
    </div>
  );
};

export default App;

ここで http://localhost:3000 に移動すると、ホスト アプリケーションがマイクロ フロントエンドからボタンをロードしているのが表示されます。

マイクロフロントエンドは、複雑なフロントエンド アプリケーションを、獨立して展開可能な小さな部分に分割することで管理する強力な方法を提供します。 React や Webpack Module Federation などのツールを活用することで、チームの自主性を高め、開発をスピードアップするスケーラブルなアーキテクチャを作成できます。マイクロフロントエンドの導入を検討する際は、そのメリットとそれによって生じる複雑さを比較検討し、プロジェクトのニーズに最も適したアプローチを選択してください。

以上がReact を使用したマイクロフロントエンド: 包括的なガイドの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。