저자: JD Logistics Ning Chong
1. 소개
마이크로 프런트엔드란 무엇입니까?
마이크로 프런트엔드는 브라우저에 있는 마이크로서비스입니다.
이 글은 주로 마이크로 프런트엔드 프레임워크의 싱글스파 기반 애플리케이션 로딩 서브애플리케이션의 싱글스파뷰 함수 라이브러리를 분석하고 코드 차원 분석을 통해 싱글스파가 로딩할 때 어떤 일이 일어나는지 모두가 이해할 수 있도록 한다. 하위 응용 프로그램. single-spa-vue 함수 라이브러리를 최적화하여 하위 애플리케이션의 상태를 유지하는 방법.
분석은 코드 차원에서 이루어지기 때문에 독자는 싱글스파에 대한 어느 정도의 이해가 필요하며 읽기 효과가 더 좋을 것이다.
2 단일 스파 로딩 하위 응용 프로그램 프로세스
기본 응용 프로그램에서 구성된 로드 하위 응용 프로그램 구성은 하위 응용 프로그램 개체를 구성하는 앱 메서드의 페이지에 하위 응용 프로그램 chunk-vendors.js 및 app.js를 삽입하고 두 개의 하위 응용 프로그램을 실행합니다. vendors.js 및 app.js 애플리케이션이 의존하는 js입니다.
앱 메서드가 실행된 후 하위 애플리케이션이 의존하는 js가 페이지 뒤의 dom 구조에 삽입됩니다.
위의 앱 메서드 실행 과정에서 기본 애플리케이션이 하위 애플리케이션을 로드하는 것을 볼 수 있는데, 이는 vue 프레임워크가 패키징 후 js 리소스를 로드하는 방식과 유사합니다. 따라서 하위 애플리케이션을 페이지에 렌더링하기 위해 하위 애플리케이션의 app.js 및 chunk-vendors.js만 로드하면 되는 이유는 무엇입니까? 다음으로 서브 어플리케이션의 entry 파일의 main.js 메소드가 어떻게 구성되어 있는지 살펴보겠습니다.
3 하위 애플리케이션의 main.js에서 구성
하위 애플리케이션의 main.js에서 기존 구성 1이 구성 2의 형식으로 대체된 것을 볼 수 있습니다.
구성 2에서는 현재 vue 구성을 single-spa-vue 함수 라이브러리에 전달합니다. el, render 메소드, Vue 객체를 포함합니다. singleSpaVue 패키징을 통해 단일 스파 수명 주기 메서드 부트스트랩, 마운트 및 마운트 해제를 반환합니다.
- bootstrap: 애플리케이션 콘텐츠가 페이지에 처음으로 탑재되기 전에 호출되는 부트스트랩 기능으로 한 번만 실행됩니다.
- mount: 서브 어플리케이션이 마운트될 때마다 실행되는 마운트 기능.
- unmount: 하위 응용 프로그램이 제거될 때마다 실행되는 마운트 해제 기능입니다.
즉, 기본 애플리케이션이 하위 애플리케이션을 로드할 때 single-spa-vue 함수를 사용하여 단일 스파의 각 라이프 사이클을 생성하고, 이는 하위 애플리케이션을 로드할 때 기본 애플리케이션이 호출합니다.
single-spa-vue가 어떻게 다양한 수명 주기 함수를 생성하는지 살펴보겠습니다.
4개의 단일 스파 뷰 소스 코드 구조
단일 spa-vue 함수 라이브러리는 하위 응용 프로그램 로드의 수명 주기를 생성하는 데 도움이 될 수 있습니다. single-spa-vue GIT 주소 링크를 통해 single-spa-vue 함수 라이브러리의 소스 코드를 다운로드할 수 있습니다.
single-spa-vue의 소스 코드는 매우 간단하며, single-spa의 수명 주기를 생성하는 함수는 몇 개뿐입니다.
- single-spa-vue 메서드: single-spa-vue 함수 라이브러리가 구성 항목을 수신하고 각 단일 스파 수명 주기를 포함하는 개체를 반환하는 외부 서비스를 제공하는 유일한 메서드입니다.
- single-spa-vue 부트스트랩, 마운트, 업데이트 및 마운트 해제의 다른 메서드는 단일 스파에 해당하는 수명 주기 함수를 생성하는 데 사용되는 메서드입니다.
이러한 메서드의 기능과 구현을 자세히 소개하겠습니다.
5개의 단일 스파 뷰 소스 코드 분석
single-spa-vue에서 제공하는 singleSpaVue 메소드는 userOpts 구성 정보를 수신하고 구성 정보는 후속 처리 전에 기본 구성 항목 defaultOpts와 병합됩니다.
5.1 구성 항목 defaultOpts
기본 구성 항목으로는 다음과 같은 항목이 있는데 여기서는 필수 항목인 appOptions, Vue/createApp만 소개합니다. 그 안에 있는 템플릿은 single-spa-vue에서는 사용되지 않지만 single-spa-html에서는 사용됩니다.
// 默认配置项列表
const defaultOpts = {
// required opts
appOptions: null,
template: null,
// sometimes require opts
Vue: null,
createApp: null,
handleInstance: null
}1) appOptions 구성 항목 소개
- appOptions: 애플리케이션의 구성 항목은 Vue 인스턴스가 초기화될 때 Vue 메서드에 매개 변수로 전달되며, appOptions의 구성 항목은 아래에서 자세히 소개합니다.
- el: 하위 응용 프로그램이 마운트해야 하는 기본 dom, 즉 vue가 마운트해야 하는 dom.
- render/template: vue의 렌더링/템플릿 구성 항목입니다.
- data: 초기화된 매개변수 객체는 마운트 기능 마운트가 실행될 때 vue 인스턴스에 직접 마운트됩니다.
2) Vue/createApp 구성 항목 소개
Vue/createApp 구성 항목은 Vue 인스턴스를 생성하는 데 사용되며 single-spa-vue 함수 라이브러리는 들어오는 Vue 객체를 통해 마운트 메소드에서 Vue 인스턴스를 생성할 수 있습니다. createApp 메서드를 전달할 수도 있으며 하위 응용 프로그램은 createApp 메서드에서 Vue 인스턴스를 반환합니다.
아래에서 수명 주기 생성 방법에서 이러한 구성 항목의 역할을 볼 수 있습니다.
5.2 참가 방법: singleSpaVue
singleSpaVue 메서드는 먼저 입력 매개변수에 대해 다음과 같은 유효성 검사를 수행하며 구체적인 검사에는 다음 네 가지 항목이 포함됩니다.
- 구성 항목 userOpts가 개체인지 여부입니다.
- vue 인스턴스를 생성하는 데 사용된 구성 Vue/createApp이 존재하는지 여부.
- vue 인스턴스를 생성하는 데 사용된 구성 항목 appOptions가 있는지 여부입니다.
- vue 인스턴스에 의해 마운트된 dom이 올바른 appOptions.el 유효성 검사인지 여부.
유효성 검사를 통과한 후 부트스트랩, 마운트, 마운트 해제 및 업데이트 메서드를 각각 호출하여 단일 스파 로딩 하위 응용 프로그램의 수명 주기 함수를 생성합니다.
다음은 각 수명 주기 함수가 생성되는 방법에 대해 자세히 설명합니다.
5.3 부트스트랩 기능: 부트스트랩
부트스트랩 기능 부트스트랩은 애플리케이션 콘텐츠가 페이지에 처음 탑재될 때 호출됩니다.
부트스트랩 기능은 구성 항목에 loadRootComponent가 있는지 먼저 확인합니다. 작성자는 구성 항목 loadRootComponent를 사용하여 현재 하위 응용 프로그램이 의존하는 상위 응용 프로그램 또는 기타 종속 리소스를 로드할 수 있음을 이해합니다.
예를 들어 페이지 A는 컴포넌트 B에 종속되어 있는데, 페이지 A를 로드할 때 loadRootComponent 메소드에서 컴포넌트 B의 정적 리소스를 로드하여 페이지에 렌더링할 수 있으며, 페이지 A는 컴포넌트 B에서 제공하는 일부 리소스 또는 dom을 직접 사용할 수 있습니다.
loadRootComponent가 구성되지 않은 경우 처리 없이 바로 반환됩니다.
5.4 하위 애플리케이션 마운트 수명 주기: 마운트
서브 어플리케이션이 매번 페이지에 마운트될 때마다 single-spa는 마운트 수명 주기 함수를 실행하고, single-spa-vue는 서브 어플리케이션의 vue 인스턴스를 초기화하고 인스턴스를 마운트하기 위해 마운트 함수에서 사용됩니다. 페이지로 .
mount 함수는 singleSpaVue에 의해 전달된 매개변수 opts, 현재 single-spa-vue mountedInstances에 의해 전역으로 마운트된 하위 애플리케이션 인스턴스 목록, 현재 하위 애플리케이션의 단일 스파 인스턴스
props인 세 개의 매개변수를 수신합니다. 기본 응용 프로그램에 등록된 수신 데이터를 입력합니다. 여기서는 현재 마운트된 하위 응용 프로그램을 식별하기 위해 props의 이름 속성만 사용됩니다.
mount 방식에서는 주로 다음과 같은 일을 한다.
1) 애플리케이션 구성 항목 appOptions를 포맷합니다.
mount 메소드는 resolveAppOptions 메소드를 사용하여 애플리케이션의 구성 항목 appOptions를 형식화합니다.
resolveAppOptions 메서드에서 appOptions가 메서드인 경우 메서드를 실행하고 customProps 매개 변수를 통해 기본 애플리케이션에서 전달한 매개 변수 props를 전달합니다.
하위 애플리케이션은 appOptions 메서드에서 상위 애플리케이션이 전달한 매개변수를 가져올 수 있으며 상위 애플리케이션의 상태에 따라 다른 처리를 수행할 수 있습니다.
2) 하위 응용 프로그램이 마운트해야 하는 DOM 개체를 초기화합니다.
dom을 초기화하는 설정과 메소드가 많고 많은 설정 항목에서 el을 얻어오게 되는데 코드가 비교적 간단해서 여기서는 자세히 다루지 않겠습니다. 값의 우선 순위만 참조용으로 나열됩니다.
appOptions.el > props.domElement > props.name
dom 노드가 포맷된 후 다음은 dom에 페이지를 마운트하기 시작합니다.
3) vue 예제를 생성하고 페이지에 마운트
페이지를 로드하기 전에 구성 항목이 있습니다: replaceMode, replaceMode 구성 항목은 el 노드 아래의 콘텐츠를 교체해야 하는지 여부를 식별하는 데 사용됩니다. 기본 replaceMode가 false인 경우 단일 스파 컨테이너 클래스의 빈 div가 el 노드 아래에 생성되어 하위 애플리케이션을 저장합니다.
데모의 코드를 예로 들어 보겠습니다.
기본 replaceMode가 false이면 base의 콘텐츠와 vue1의 콘텐츠가 공존합니다. 아래 그림과 같이:
replaceMode를 true로 변경하면 base의 콘텐츠가 vue1의 콘텐츠로 덮어쓰이는 것을 확인할 수 있습니다.
아래 그림과 같이:
마운팅 방법을 설정한 후 실제로 서브 어플리케이션을 dom에 마운트하기 시작합니다.
여기에는 두 가지 마운팅 방법이 지원됩니다. 하나는 vue3의 createApp 메서드를 사용하여 마운트하는 것이고 다른 하나는 vue2의 새로운 Vue 메서드를 사용하여 마운트하는 것입니다. 여기서 마운팅 방법은 실제로 vue를 사용하여 dom에 마운트하는 구성과 동일합니다.
위의 단계를 통해 이제 하위 응용 프로그램이 html 페이지의 dom에 마운트됩니다.
5.5 업데이트 수명 주기 기능: 업데이트
소포.업데이트()가 호출되면 업데이트 메서드가 트리거되는데, 작성자가 소포의 고급 기능을 사용하지 않기 때문에 여기서는 소개하지 않겠습니다.
5.6 하위 응용 프로그램 제거 수명 주기: 마운트 해제
페이지 URL이 변경되면 하위 응용 프로그램 페이지 경로를 떠날 때 마운트 해제 방법이 트리거됩니다.
마운트 해제 방법에서 수행할 주요 작업은 다음과 같습니다.
- vue 애플리케이션 제거
- vue 인스턴스 삭제
- 동시에 페이지 돔을 지웁니다.
마운트 해제 작업을 수행한 후 하위 응용 프로그램의 데이터 및 DOM이 지워집니다.
5.7 요약
이상은 single-spa에서 공식적으로 제공하는 single-spa-vue 함수 라이브러리로 하위 어플리케이션을 마운트하는 전체 과정입니다. 위의 분석을 통해 single-spa-vue 함수 라이브러리는 singleSpaVue 메서드를 호출하여 부트스트랩, 마운트, 업데이트, 마운트 해제의 네 가지 메서드를 포함하는 객체를 반환함을 확인했습니다. 해당 메서드는 기본 응용 프로그램에서 하위 응용 프로그램을 로드하는 수명 주기에서 실행되며, 실행 메서드를 통해 기본 응용 프로그램에 하위 응용 프로그램을 마운트하거나 기본 응용 프로그램에서 제거합니다.
single-spa-vue에서 하위 응용 프로그램을 로드하는 과정을 통해 단일 스파는 각 하위 응용 프로그램을 복잡한 응용 프로그램으로 조립하고 사용자 인식 없이 각 하위 응용 프로그램을 별도로 관리합니다.
싱글스파가 서브애플리케이션을 불러올때 vue버전 말고도 다른 버전이 있지만 불러오는 생각은 비슷해서 모두 함수라이브러리에서 html로 불러오고 여기서는 따로 소개하지 않겠습니다.
하위 애플리케이션을 로드하는 다른 방법: single-spa-react, single-spa-html
6 하위 애플리케이션 상태 유지
실제 개발 과정에서 작성자는 상태를 유지하기 위해 vue에서 keep-alive를 사용해야 하는 페이지를 몇 개 만났고, 페이지 전환 과정에서 페이지가 소멸되더라도 페이지 상태는 유지해야 하지만 단일 spa-vue 언마운트 방식 구현시 페이지를 전환하면 서브애플리케이션과 vue 인스턴스가 소멸되고 이때 서브애플리케이션의 keep-alive가 적용되지 않는 것으로 확인되었습니다.
아래 그림과 같이:
입력에 내용을 입력한 후 전통적인 스파 프로젝트는 연결 유지를 통해 상태를 기록할 수 있으며 페이지 경로가 전환되면 다시 전환하여 상태를 계속 유지합니다. 하지만 single-spa-vue를 직접 사용하면 하위 응용 프로그램이 마운트 해제를 트리거할 때 input의 입력 내용 1111이 지워집니다. 이러한 상황에 대응하여 저자는 single-spa-vue 클래스 라이브러리를 일부 수정했습니다.
수정 내용은 다음과 같습니다.
6.1 하위 앱 소멸에서 숨김으로 변경
single-spa-vue 구성 항목에 구성 항목을 추가하고 구성 항목에 isKeepAlive 구성 항목이 있는지 여부에 따라 현재 dom을 숨길지 삭제할지 판단합니다. 이와 같이 서브어플리케이션의 언마운트 방식이 발동되면 서브어플리케이션은 삭제되지 않고 그대로 유지된다.
동시에 작성자는 vue의 경로 구성을 일부 최적화했습니다.페이지가 존재하지 않을 때 하위 응용 프로그램의 빈 구성 요소가 이때 dom에 마운트되어 이를 방지합니다. 페이지가 숨겨져 있고 dom이 여전히 html에 있으므로 페이지 dom이 너무 많습니다.
6.2 하위 애플리케이션이 신규에서 디스플레이로 변경됨
sub-application을 마운트하기 위해 single-spa-vue 구성 항목에서 mount 메소드를 호출하면 현재 sub-application이 존재하는지 판단하여 sub-application이 존재하면 바로 sub-page가 표시됩니다. 하위 응용 프로그램이 파괴되지 않았습니다. 이때 하위 응용 프로그램 응용 프로그램의 연결 유지는 항상 적용되고 페이지의 상태를 저장합니다.
Single-spa-vue 클래스 라이브러리의 마운트 및 마운트 해제 방법의 최적화를 통해 사용자는 실제로 vue를 사용하는 것처럼 원활하게 페이지를 사용할 수 있으며 페이지 상태를 유지하여 사용자 경험을 향상시킬 수 있습니다.