기술나눔

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

언바운드 마이크로 프런트엔드 프레임워크는 Web Components + iframe을 기반으로 하는 마이크로 프런트엔드 솔루션으로, 저렴한 비용, 빠른 속도, 기본 격리, 강력한 기능 등 일련의 장점을 가지고 있습니다. 다음은 무제한 마이크로 프런트엔드 프레임워크에 대한 자세한 소개입니다.

1. 배경 및 개요

마이크로 프런트 엔드는 여러 팀이 독립적으로 기능을 게시하여 최신 웹 애플리케이션을 공동으로 구축할 수 있는 기술적 수단 및 방법 전략입니다. 무제한 마이크로 프런트엔드 프레임워크는 웹 구성요소와 iframe 기술을 도입하여 개발자에게 효율적이고 유연한 마이크로 프런트엔드 솔루션을 제공합니다. 이 프레임워크는 적응 비용, 스타일 격리, 실행 성능, 페이지 화이트 스크린, 하위 애플리케이션 통신, 하위 애플리케이션 연결 유지, 다중 애플리케이션 활성화, Vite 측면에서 기존 마이크로 프런트엔드 솔루션의 핵심 사용자 요구 사항을 해결하는 것을 목표로 합니다. 프레임워크 지원, 애플리케이션 공유 등이 문제입니다.

2. 핵심 기능

1. 저렴한 비용: 언바운드 마이크로 프론트 엔드 프레임워크의 주요 애플리케이션은 사용 비용이 낮고 하위 애플리케이션 적응 비용도 상대적으로 낮습니다.
2. 고속 : 서브애플리케이션의 첫 화면이 빠르게 열리고, 서브애플리케이션이 빠르게 실행됩니다. 이는 언바운드 프레임워크의 최적화된 리소스 관리 및 사전 로딩 전략 때문입니다.
3. 네이티브 격리 : CSS 스타일은 웹 구성요소를 통해 엄격한 기본 격리를 달성할 수 있으며, iframe에서 실행되는 JS도 엄격한 기본 격리를 달성합니다. 이 격리 메커니즘은 하위 응용 프로그램 간의 독립성을 보장하고 스타일 충돌과 스크립트 충돌을 방지합니다.
4. 강한 : 무제한 마이크로 프런트엔드 프레임워크는 하위 애플리케이션 연결 유지, 하위 애플리케이션 중첩, 다중 애플리케이션 활성화, 애플리케이션 공유, 분산 통신 등을 지원합니다. 이러한 기능은 복잡한 프런트엔드 애플리케이션을 처리할 때 무제한 프레임워크를 더욱 유연하고 확장 가능하게 만듭니다.

3. 기술적 구현

언바운드 마이크로 프론트 엔드 프레임워크는 Web Components + iframe의 샌드박스 모드를 채택하고 iframe의 장점을 계승하고 단점을 해결하여 기본 격리 및 효율적인 운영을 달성합니다. 구체적인 구현 방법은 다음과 같습니다.

1. 기본 애플리케이션과 동일한 출처를 가진 iframe을 만듭니다.: 경로는 하위 경로의 라우팅 정보를 전달합니다. 동일한 출처는 애플리케이션 간의 통신을 용이하게 하기 위한 것입니다.
2. 하위 애플리케이션의 항목 HTML을 구문 분석합니다.: HTML 부분을 식별하고, 스타일과 js를 분리하고, html을 다시 삽입하고, html을 마운트합니다.
3. iframe에서 문서 객체 가로채기: 팝업 창이나 버블링 구성 요소가 기본 애플리케이션을 덮을 수 없는 문제를 해결하기 위해 통일된 방식으로 DOM을 ShadowRoot로 지정합니다.
4. 통신 메커니즘: iframe과 기본 애플리케이션은 동일한 도메인에 있으며 통신을 위해 자연스럽게 메모리를 공유합니다. Unbounded는 통신 문제를 해결하기 위해 분산형 이벤트 메커니즘을 제공합니다.
5. 노선현황 관리: 브라우저의 앞뒤 이동은 자연스럽게 iframe에 영향을 줄 수 있습니다. 이때 iframe의 라우팅 변경 사항이 모니터링되어 기본 애플리케이션에 동기화되면 저장된 경로를 URL에서 다시 읽을 수 있습니다. .

4. 장점 및 용도

무제한 마이크로 프런트엔드 프레임워크의 장점은 저렴한 비용, 빠른 속도, 기본 격리 및 강력한 기능입니다. 이는 크고 복잡한 프런트엔드 애플리케이션을 처리할 때 상당한 이점을 제공합니다. 동시에 무제한 프레임워크는 Vue, React 등과 같은 다양한 프런트엔드 기술 스택도 지원하므로 개발자는 프로젝트 요구 사항에 따라 기술 스택을 유연하게 선택할 수 있습니다.

애플리케이션 시나리오 측면에서 무제한 마이크로 프런트엔드 프레임워크는 효율적인 공동 개발, 독립적 배포 및 업그레이드가 필요한 대규모 웹 애플리케이션에 적합합니다. 무제한 프레임워크를 도입함으로써 개발자는 프런트 엔드 애플리케이션을 여러 개의 독립적인 마이크로 프런트 엔드 애플리케이션으로 분할할 수 있으며 각 애플리케이션을 독립적으로 개발, 테스트 및 배포할 수 있습니다. 이는 개발 효율성을 향상시킬 뿐만 아니라 프로젝트 복잡성과 위험도 줄여줍니다.