마이크로 프론트엔드는 여러 팀이 서로 영향을 주지 않고 함께 개발할 수 있도록 각 모듈을 서로 다른 프로젝트로 나누는 것입니다. 사용자는 여러 모듈을 사용하려면 한 번만 로그인하면 됩니다.
예를 들어 A팀은 Angular를 사용하여 이전 프로젝트를 유지 관리하고, B팀은 React를 개발하고, C팀은 Vue를 개발합니다. 논리적으로 말하면 세 가지 abc 프로젝트는 서로 관련이 없지만 모두 회사의 내부 관리 시스템입니다. 함께 통합해야 하는데 이때 마이크로 프론트 엔드 기술을 사용할 수 있으며 사용자 정보를 메인 프로젝트로 분리하여 한 번만 로그인하고 각 프로젝트를 열 수 있습니다.
다음 효과와 유사: 각 시스템은 독립적인 모듈입니다.
마이크로 프론트엔드의 장점:
1. 액세스 프로젝트는 기술 스택 사용과 관련이 없습니다.
2. 각 프로젝트는 서로 독립적이고, 독립적으로 개발되며, 독립적인 백엔드를 갖습니다.
3. 점진적 업그레이드(새로운 시스템이 조금씩 추가될 수 있음)
4. 독립적으로 실행
실제로 우리가 일반적으로 접하는 iframe은 일종의 마이크로 프런트엔드입니다.
다음은 시중에서 일반적으로 사용되는 마이크로 프런트 엔드 프레임워크에 대한 간략한 소개입니다: 싱글 스파, qiankun, 마이크로 앱(권장), wujie(권장),
아이프레임
iframe의 장점:
iframe의 고유한 스타일과 환경 격리 메커니즘은 자연스러운 샌드박스 메커니즘(상호 격리)을 갖습니다.
내장된 하위 애플리케이션은 비교적 간단하고 배우기 쉽습니다.
iframe 단점:
iframe 기능 간 이동은 유효하지 않으며 페이지를 새로 고치면 상태를 저장할 수 없습니다.
URL 레코드가 완전히 유효하지 않으며 새로 고치면 홈 페이지로 돌아갑니다.
기본 응용 프로그램은 바로 가기 키 작업을 가로채고 이벤트 버블링은 기본 문서 트리에 침투하지 않습니다.
모달 팝업 창의 배경은 전체 애플리케이션을 덮을 수 없습니다.
iframe 애플리케이션이 로드되지 않았고 콘텐츠가 올바르지 않아 기본 애플리케이션이 이를 감지할 수 없어 통신 문제가 발생했습니다.
요약하자면, iframe은 마이크로 프런트엔드도 구현할 수 있지만 자체적인 단점 중 많은 부분을 해결해야 합니다. 회사의 무한한 마이크로 프런트 엔드는 iframe을 기반으로 구현됩니다.
싱글 스파
공식 홈페이지: 싱글 스파 | 싱글 스파
세 가지 후크 기능(bootstrap-start, mount-mount, unmount-destroy)이 기본 프로그램에 대한 진입 기능에 노출되어야 합니다.
결점:
1. 하위 응용 프로그램에서 스타일 충돌과 스타일 오염이 발생할 수 있습니다.
2.js에도 동일한 오염 문제가 있습니다.
3. 메인 애플리케이션은 하위 애플리케이션에 의해 패키징된 lib 라이브러리 파일을 수동으로 로드해야 합니다.
첸쿤
Alibaba는 umi 애플리케이션을 마이크로 프런트 엔드로 한 번의 클릭으로 전환할 수 있도록 singe-spa를 기반으로 하는 umi 플러그인을 개발했습니다.
공식 문서: 빠르게 시작하기 - qiankun
특징:
1. html <qiankun>을 통한 액세스는 비교적 간단하고 빠릅니다.
2. 스타일 격리(유사: 범위 지정)
3. 샌드박스 운영
4. 리소스 사전 로드(메인 애플리케이션이 시작/마운트를 실행하고 즉시 다른 애플리케이션의 정적 리소스를 사전 로드함)
5. 애플리케이션 간 통신이 완료될 수 있습니다.
6. 다른 신기술에 있어서는 3년간의 기술개발이 상대적으로 안정적이다.
마이크로앱
Jingdong의 마이크로 앱 개발은 싱글 스파의 아이디어를 따르지 않고 WebComponent의 아이디어를 끌어냈습니다.
프런트 엔드를 웹 구성 요소 구성 요소로 캡슐화하고 ShadowDom을 사용하여 격리합니다.
공식 문서: MicroApp
이점:
1. 서브어플리케이션 프로젝트의 로직 방식을 변경하거나 웹팩을 수정할 필요가 없어 사용이 간편합니다.
2. qiankun 하위 프로젝트보다 덜 방해적입니다.
단점: 최신 기술은 불안정할 수 있음
우지에
Tencent는 웹 구성요소 + iframe을 기반으로 마이크로 프런트엔드 프레임워크를 개발합니다.
공식 문서: 버스 | 무제한
이점:
1. 사전 로딩
2. 개봉 즉시 사용 가능하며 개발 비용이 저렴합니다.
3. 애플리케이션 연결 유지(유사: 연결 유지)
4.js, CSS 샌드박스
단점: 기술이 상대적으로 새롭고 불안정할 수 있음