마이크로 프런트 엔드: Qiankun, Wujie, 싱글 스파, iframe 비교

마이크로 프런트엔드: Qiankun, Wujie, 싱글 스파, iframe 비교

2024-07-12

1. 마이크로 프론트엔드 프레임워크 개요

마이크로 프런트 엔드 프레임워크는 대규모 프런트 엔드 애플리케이션을 여러 개의 작고 독립적이며 유지 관리 가능한 마이크로 프런트 엔드 애플리케이션으로 분할하도록 설계된 기술 솔루션입니다. 각 마이크로 프런트 엔드 애플리케이션은 개발, 테스트, 배포 및 실행할 수 있습니다. 전체적인 협업과 사용자 경험을 유지하면서 독립적으로 작업할 수 있습니다.이 아키텍처는 마이크로서비스 아키텍처와 유사하지만 프런트엔드 영역에 중점을 둡니다.

2. 일반적인 마이크로 프런트엔드 프레임워크

첸쿤 : Ant Financial에서 개발 및 유지 관리하는 Single-SPA 기반으로 기술 스택 독립적이고 간편한 액세스 기능을 제공합니다. Vue 및 React와 같은 여러 프런트 엔드 프레임워크를 지원하며 변환 비용이 저렴하고 친숙한 개발 경험을 제공합니다.
싱글 스파 : 단일 페이지 애플리케이션(SPA)의 라우팅 관리에 중점을 둔 경량 JavaScript 프런트엔드 라우팅 프레임워크입니다. 그 자체로 완전한 마이크로 프런트엔드 프레임워크는 아니지만 많은 마이크로 프런트엔드 구현의 기초입니다.
아이프레임: iframe 자체는 마이크로 프런트엔드 프레임워크는 아니지만 마이크로 프런트엔드의 간단한 구현으로 자주 사용됩니다.
무제한 : 언바운드 마이크로 프런트엔드 프레임워크는 Web Components + iframe 기반의 마이크로 프런트엔드 솔루션으로, 저렴한 비용, 빠른 속도, 네이티브 격리, 강력한 기능 등 일련의 장점을 가지고 있습니다.다음은 언바운드 마이크로 프론트엔드 프레임워크에 대한 자세한 소개입니다.

공통점:경로가 전환되면 해당 애플리케이션의 코드를 로드하여 컨테이너에서 실행할 수 있습니다.

가지다하위 애플리케이션 로드 및 언로드 기능, 페이지가 하나의 하위 애플리케이션에서 다른 하위 애플리케이션으로 전환되면 정상적으로 로드되고 렌더링될 수 있습니다.
가지다라우팅 상태 유지 기능, 하위 애플리케이션을 활성화한 후 하위 애플리케이션의 브라우저 새로 고침, 정방향 및 역방향 라우팅이 정상적으로 작동할 수 있습니다.
메인 애플리케이션과 하위 애플리케이션, 하위 애플리케이션과 하위 애플리케이션 사이서로 의사소통이 가능하다；
각 마이크로 애플리케이션독립적인 창고 관리, 독립적인 기술 스택 개발, 독립적인 배포 및 독립적인 운영；

3. 마이크로 프론트엔드 프레임워크 비교

특성	치안쿤	무제한	싱글 스파	아이프레임
기술 스택 지원	기술 스택에 독립적이며 React, Vue, Angular 등을 지원합니다.	WebComponent를 기반으로 다양한 기술 스택을 지원합니다.	기술 스택에 독립적이며 여러 프런트엔드 프레임워크를 지원합니다.	기술 스택은 관련이 없지만 통합에는 호환성을 고려해야 합니다.
액세스 방법	JS API를 통한 간단한 액세스	상대적으로 간단하며 WebComponent를 통해 캡슐화됩니다.	복잡하며 단일 스파 수명 주기를 구성해야 합니다.	간단하고 HTML 태그를 통해 삽입됨
샌드박스 격리	JS 샌드박스 및 스타일 격리 제공	자연적인 격리를 위해 WebComponent 사용	개발자는 스스로 샌드박스 격리를 구현해야 합니다.	iframe 자연 격리
노선관리	라우팅 상태 유지 관리 및 구성 가능한 라우팅 매핑 지원	가상 라우팅 지원 및 라우팅 상태 유지	최상위 경로로서 하위 애플리케이션 경로를 직접 관리해야 합니다.	라우팅은 iframe 자체 내의 애플리케이션에 의해 관리됩니다.
애플리케이션 통신	상위-하위 애플리케이션과 하위-하위 애플리케이션 간 통신 메커니즘 제공	통신을 지원하는 컴포넌트 기반 API 제공	개발자는 통신 메커니즘을 직접 구현해야 합니다.	postMessage나 URL 매개변수 등을 통해 통신할 수 있습니다.
리소스 사전 로드	정적 리소스 사전 로드 지원	정적 리소스 사전 로드 지원	애플리케이션의 지연 로딩 지원	사전 로드, 요청 시 로드를 지원하지 않습니다.
성능에 미치는 영향	샌드박싱 및 지연 로딩을 통해 더 낮고 최적화됨	낮지만 WebComponent에 성능 오버헤드가 있을 수 있음	낮지만 애플리케이션 최적화에 따라 다름	높을수록 iframe 로딩 및 렌더링 오버헤드가 더 커집니다.
개발 경험	더 나은, 풍부한 API 및 문서 제공	더 나은 구성 요소 기반 API가 더 직관적입니다.	일반적으로 많은 세부사항을 직접 처리해야 합니다.	더 좋고, 기존 애플리케이션에 쉽게 통합 가능
생산 가용성	입증되었으며 생산 환경에 적합함	프로덕션 환경에 적합하지만 커뮤니티 지원이 적을 수 있습니다.	프로덕션 환경에 적합하며 개발자 스스로 개선이 필요함	프로덕션 환경에 적합하지만 보안 및 성능 문제를 신중하게 처리해야 함
적응 비용	더 높음, 라우팅, 수명주기 등을 조정해야 함	보통, 주로 WebComponent에 적용됨	높음, 단일 스파 아키텍처에 대한 심층적 이해 필요	낮지만 호환성 및 성능 문제에 주의가 필요함

마이크로 프런트엔드 프레임워크는 기술 스택 독립성, 독립적인 개발 및 배포, 증분 업그레이드 등과 같은 프런트엔드 애플리케이션 개발에 많은 이점을 제공합니다. 그러나 액세스 난이도가 높고 리소스 공유 기능이 좋지 않은 등의 단점도 있습니다. 따라서 마이크로 프런트엔드 프레임워크 사용 여부를 선택할 때는 프로젝트의 구체적인 요구 사항과 팀의 기술적 역량을 기반으로 종합적으로 고려해야 합니다. 동시에 실제 적용에서는 프로젝트의 원활한 진행과 안정적인 운영을 보장하기 위해 마이크로 프런트엔드 프레임워크 선택, 아키텍처 설계, 코드 관리 등과 같은 문제에도 주의를 기울여야 합니다. 체계.

기술나눔