技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

アンバウンド マイクロ フロントエンド フレームワークは、Web コンポーネント + iframe をベースとしたマイクロ フロントエンド ソリューションであり、低コスト、高速、ネイティブ分離、強力な機能などの一連の利点があります。以下は、無制限のマイクロ フロントエンド フレームワークの詳細な紹介です。

1. 背景と概要

マイクロ フロントエンドは、機能を個別に公開することで、複数のチームが最新の Web アプリケーションを共同で構築するための技術的手段および方法戦略です。無制限のマイクロ フロントエンド フレームワークは、Web コンポーネントと iframe テクノロジを導入することにより、開発者に効率的で柔軟なマイクロ フロントエンド ソリューションを提供します。このフレームワークは、適応コスト、スタイル分離、実行パフォーマンス、ページ ホワイト スクリーン、サブアプリケーション通信、サブアプリケーション キープアライブ、マルチアプリケーション アクティベーション、Vite の観点から、既存のマイクロ フロントエンド ソリューションの中心となるユーザーの要求を解決することを目的としています。フレームワークのサポート、アプリケーションの共有などの問題。

2. コア機能

1. 低コスト: アンバウンド マイクロ フロントエンド フレームワークのメイン アプリケーションの使用コストは低く、サブアプリケーションの適応コストも比較的低くなります。
2. 高速 : サブアプリケーションの最初の画面がすばやく開き、サブアプリケーションがすばやく実行されます。これは、無制限フレームワークの最適化されたリソース管理とプリロード戦略によるものです。
3. ネイティブの分離 : CSS スタイルは、Web コンポーネントを通じて厳密なネイティブ分離を実現でき、iframe で実行される JS も厳密なネイティブ分離を実現します。この分離メカニズムにより、サブアプリケーション間の独立性が確保され、スタイルの競合やスクリプトの競合が回避されます。
4. 強力な : 無制限のマイクロ フロントエンド フレームワークは、サブアプリケーションのキープアライブ、サブアプリケーションのネスティング、マルチアプリケーションのアクティベーション、アプリケーション共有、分散通信などをサポートします。これらの機能により、複雑なフロントエンド アプリケーションを扱う際に、無制限のフレームワークがより柔軟でスケーラブルになります。

3. 技術的な実装

アンバウンドマイクロフロントエンドフレームワークは、Webコンポーネント+iframeのサンドボックスモードを採用し、iframeの利点を継承しつつ欠点を解決することでネイティブ分離と効率的な動作を実現します。具体的な実装方法には次のようなものがあります。

1. メインアプリケーションと同じオリジンを持つ iframe を作成する: パスはサブルートのルーティング情報を伝達しますが、その起源はアプリケーション間の通信を容易にすることです。
2. サブアプリケーションのエントリHTMLを解析します。: HTML 部分を特定し、スタイルと JS を分離し、CSS を処理して HTML を再挿入し、WebComponent を作成して HTML をマウントします。
3. iframe 内のドキュメント オブジェクトをインターセプトする: 統一された方法で DOM をshadowRootにポイントし、メイン アプリケーションをカバーできないポップアップ ウィンドウやバブリング コンポーネントの問題を解決します。
4. 通信メカニズム: iframe とメイン アプリケーションは同じドメインにあり、通信のためにメモリを自然に共有します。Unbounded は、通信の問題を解決するための分散型イベント メカニズムを提供します。
5. ルート状況管理: ブラウザの前後の動きは当然ながら iframe に影響を与える可能性があります。このとき、iframe のルーティングの変更は監視され、ブラウザが更新されると、保存されたルートを URL から読み取ることができます。 。

4. 利点と応用例

アンバウンド マイクロ フロントエンド フレームワークの利点は、低コスト、高速、ネイティブ分離、および強力な機能です。これにより、大規模で複雑なフロントエンド アプリケーションを扱う場合に大きな利点が得られます。同時に、この無制限フレームワークは、Vue、React などのさまざまなフロントエンド テクノロジー スタックもサポートしているため、開発者はプロジェクトのニーズに基づいてテクノロジー スタックを柔軟に選択できます。

アプリケーション シナリオの観点から見ると、無制限のマイクロ フロントエンド フレームワークは、効率的な共同開発、独立した展開、およびアップグレードを必要とする大規模な Web アプリケーションに適しています。無制限のフレームワークを導入することにより、開発者はフロントエンド アプリケーションを複数の独立したマイクロ フロントエンド アプリケーションに分割でき、各アプリケーションを独立して開発、テスト、デプロイできます。これにより、開発効率が向上するだけでなく、プロジェクトの複雑さとリスクも軽減されます。