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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// 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: マイクロフロントエンドをロードする
ホストアプリで、マイクロフロントエンドコンポーネントを動(dòng)的にロードできるようになりました:

// 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 },
      },
    }),
  ],
};

• アプリケーションを?qū)g行する 必ず両方のアプリケーションを異なるポートで実行してください。たとえば、マイクロフロントエンドをポート 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 に移動(dòng)すると、ホスト アプリケーションがマイクロ フロントエンドからボタンをロードしているのが表示されます。

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

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