마이크로 프론트엔드 소개-JS 튜토리얼-php.cn

마이크로 프론트엔드 소개

WBOY

풀어 주다： 2024-08-30 19:04:11

원래의

628명이 탐색했습니다.

마이크로 프론트엔드에서는 모놀리식 앱을 여러 개의 작은 앱으로 나눕니다.

각 앱은 모놀리식 앱의 고유한 기능을 담당합니다.
예를 들어
전자상거래 앱은 아래와 같이 더 작은 독립 마이크로 프런트엔드 앱으로 나눌 수 있습니다.

상품목록
장바구니
배송
결제
추적
고객 서비스 등

왜 마이크로 프론트엔드인가?

여러 팀이 하나의 MFE 앱을 전담하여 개별적으로 작업할 수 있습니다.
코드 재사용성이 매우 높습니다.
각 팀은 자신의 기술(React/Angular/Vue), 배포, 개발 전략 등을 자유롭게 선택할 수 있습니다.
하나의 앱이 다운되어도 나머지 앱은 계속 작동합니다.
각 MFE 앱은 크기가 작아서 이해하고 변경하기 쉽습니다.

모놀리식 vs 마이크로 프론트엔드 앱 아키텍처

Introduction to Micro-frontend

모놀리식 앱 :- 웹 애플리케이션의 모든 기능을 하나의 앱에 담았습니다.
마이크로 프론트엔드 앱 :- 각 기능은 독립적인 MFE 앱(예:
)에 의해 관리됩니다. MFE #1은 앱바를 담당합니다.
MFE #2는 제품 목록을 담당합니다.
MFE #3은 측면 탐색 모음을 담당합니다.
컨테이너 앱은 이러한 MFE 앱 간의 조정을 담당합니다.

MFE 앱이 서로 통합되는 방식

Build Time 통합(Compile Time 통합)
런타임 통합(클라이언트측 통합)
서버측 통합(SSR 통합).

Build Time 통합(Compile Time 통합)
이 통합에서 컨테이너 앱은 모든 MFE 앱 소스 코드에 액세스할 수 있으며 브라우저에 로드되기 전에 컨테이너 앱이 빌드/컴파일될 때 결합된 번들이 생성됩니다.

장점

설정 및 이해가 매우 간단합니다.
MFE는 성능 향상을 위해 지연 로드될 수 있습니다.

단점

MFE npm 패키지가 변경될 때마다 컨테이너 앱을 다시 빌드하고 다시 배포해야 합니다.
여러 MFE가 컨테이너 앱과 긴밀하게 결합되면 MFE 앱이 분산형 모놀리식 앱이 될 가능성이 있습니다.
간단히 말하면 MFE는 NPM 패키지와 유사한 컨테이너 앱과 통합됩니다.

Build Time Integration에서 MFE 앱을 통합하는 방법(여기에서는 전자상거래 애플리케이션을 예로 들어 설명)

1팀, Products-List MFE 앱을 개발합니다.
1팀은 Products-List MFE 앱을 배포하고 NPM 패키지로 게시합니다.
컨테이너 앱을 관리하는 팀 #2는 제품 목록 MFE 앱을 컨테이너 앱의 NPM 패키지 종속성으로 포함합니다.
2번 팀은 컨테이너 앱 번들을 컴파일하고 빌드합니다. 이 번들에는 Products-List MFE 앱 코드를 포함한 컨테이너 앱 코드도 포함되어 있습니다.
간단히 말하면 MFE는 NPM 패키지와 유사한 컨테이너 앱과 통합됩니다.
그렇습니다.

런타임 통합(클라이언트 측 통합)
이 통합에서는 컨테이너 앱이 브라우저에 로드되면 MFE 앱의 URL을 사용하여 MFE 앱에 액세스할 수 있습니다.

장점

컨테이너 앱을 다시 배포하지 않고도 각 MFE를 배포할 수 있습니다.
동일한 MFE 앱의 다른 버전을 사용할 수 있으며, 컨테이너는 사용할 MFE 버전과 시기를 결정할 수 있으므로 테스트와 통합이 쉬워집니다.
각 MFE 앱에는 개발 목적을 위한 자체 도구와 라이브러리가 있을 수 있습니다.

단점

런타임 MFE는 빌드 타임 MFE보다 설정 및 통합이 더 복잡합니다.

MFE 앱이 런타임 통합에 통합되는 방법(여기에서는 전자상거래 애플리케이션을 예로 들어 설명)

1팀, Products-List MFE 앱을 개발합니다.
팀 #1은 Products-List MFE(예: https://mystore.in/productslist.js)를 배포합니다.
컨테이너 앱을 관리하는 #2팀에서는 webpack-module-federation을 사용하여 컨테이너 앱과 통합합니다.
사용자가 https://mystore.in/을 열면 컨테이너 앱이 브라우저에 로드되고 Products-List MFE 앱을 가져와 컨테이너 앱 페이지의 정의된 위치에 표시합니다.
그렇습니다.