From 2d811df1ce8d9cbd3d7da696f4bb8981be87300b Mon Sep 17 00:00:00 2001 From: ningzhongbin Date: Fri, 11 Nov 2022 17:28:18 +0800 Subject: [PATCH] =?UTF-8?q?feat(option):=20loadMicroApp=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=20disableCache=20=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/README.md | 2 ++ docs/api/README.zh.md | 2 ++ docs/faq/README.md | 28 ++++++++++++++++++++++++++++ docs/faq/README.zh.md | 28 ++++++++++++++++++++++++++++ src/apis.ts | 7 ++++--- src/interfaces.ts | 4 ++++ 6 files changed, 68 insertions(+), 3 deletions(-) diff --git a/docs/api/README.md b/docs/api/README.md index b84786062..60ca49354 100644 --- a/docs/api/README.md +++ b/docs/api/README.md @@ -161,6 +161,8 @@ By linking the micro-application to some url rules, the function of automaticall - excludeAssetFilter - `(assetUrl: string) => boolean` - optional，some special dynamic loaded micro app resources should not be handled by qiankun hijacking + - disableCache - `boolean` - optional，qiankun will not load resources and excute code repeatedly when loading the same micro app multiple times, so it can improve performace and avoid the risk of memory leaks, default is `false`. + - Usage Start qiankun. diff --git a/docs/api/README.zh.md b/docs/api/README.zh.md index 13e80da77..3632fdec8 100644 --- a/docs/api/README.zh.md +++ b/docs/api/README.zh.md @@ -269,6 +269,8 @@ toc: menu - excludeAssetFilter - `(assetUrl: string) => boolean` - 可选，指定部分特殊的动态加载的微应用资源（css/js) 不被 qiankun 劫持处理 + - disableCache - `boolean` - 可选，是否禁用缓存，在多次加载相同微应用的时候，qiankun 不会重复加载资源和执行代码，这样可以提升性能和避免内存泄漏的风险，默认为 `false` + - 返回值 - `MicroApp` - 微应用实例 - mount(): Promise<null>; diff --git a/docs/faq/README.md b/docs/faq/README.md index 2afe378ab..928ab4fc3 100644 --- a/docs/faq/README.md +++ b/docs/faq/README.md @@ -802,3 +802,31 @@ As the requests to pull micro-app entry are all cross-domain, when your micro-ap }, }); ``` + + ## Why bootstrap hook only run once when loading the same micro app multi times by using loadMicroApp method? + + By default，to improve performace and avoid the risk of memory leaks, qiankun will not load resources and excute code repeatedly when loading the same micro app multiple times, so it will skip bootstrap hook, and remount the micro app directly. + + You can disable cache to solve the problem, however, be ware this method may cause performance and memory problems. + + ```js + import { loadMicroApp } from 'qiankun'; + + loadMicroApp(app, { + disableCache: true + }); + ``` + + ## Why global data being cached when loading the same micro app multi times by using loadMicroApp method? + + By default，to improve performace and avoid the risk of memory leaks, qiankun will not load resources and excute code repeatedly when loading the same micro app multiple times, so it will reuse the global data cache of last time. + + You can disable cache to solve the problem, however, be ware this method may cause performance and memory problems. + + ```js + import { loadMicroApp } from 'qiankun'; + + loadMicroApp(app, { + disableCache: true + }); + ``` diff --git a/docs/faq/README.zh.md b/docs/faq/README.zh.md index 5d0f98fd4..826986615 100644 --- a/docs/faq/README.zh.md +++ b/docs/faq/README.zh.md @@ -828,3 +828,31 @@ export async function mount(props) { } } ``` + + ## 为什么使用 loadMicroApp 多次加载相同微应用时，bootstrap 方法只会执行一次？ + + 默认情况下，为了提升性能和避免内存泄漏的风险，在多次加载相同微应用的时候，qiankun 不会重复加载资源和执行代码，因此会跳过 bootstrap 钩子，直接 mount 微应用。 + + 可以通过禁用缓存解决，但需要注意的是该方法可能会导致性能和内存的问题。 + + ```js + import { loadMicroApp } from 'qiankun'; + + loadMicroApp(app, { + disableCache: true, // 禁用缓存 + }); + ``` + + ## 为什么使用 loadMicroApp 多次加载相同微应用时，一些全局状态会保留？ + + 默认情况下，为了提升性能和避免内存泄漏的风险，在多次加载相同微应用的时候，qiankun 不会重复加载资源和执行代码，会直接复用缓存在内存里的代码，因此会保留之前的全局状态。 + + 可以通过禁用缓存解决，但需要注意的是该方法可能会导致性能和内存的问题。 + + ```js + import { loadMicroApp } from 'qiankun'; + + loadMicroApp(app, { + disableCache: true, // 禁用缓存 + }); + ``` diff --git a/src/apis.ts b/src/apis.ts index e3758ba3b..c17d4a659 100644 --- a/src/apis.ts +++ b/src/apis.ts @@ -84,6 +84,7 @@ export function loadMicroApp( lifeCycles?: FrameworkLifeCycles, ): MicroApp { const { props, name } = app; + const { disableCache } = configuration || {}; const container = 'container' in app ? app.container : undefined; // Must compute the container xpath at beginning to keep it consist around app running @@ -137,7 +138,7 @@ export function loadMicroApp( ); const { $$cacheLifecycleByAppName } = userConfiguration; - if (container) { + if (container && !disableCache) { // using appName as cache for internal experimental scenario if ($$cacheLifecycleByAppName) { const parcelConfigGetterPromise = appConfigPromiseGetterMap.get(name); @@ -152,7 +153,7 @@ export function loadMicroApp( const parcelConfigObjectGetterPromise = loadApp(app, userConfiguration, lifeCycles); - if (container) { + if (container && !disableCache) { if ($$cacheLifecycleByAppName) { appConfigPromiseGetterMap.set(name, parcelConfigObjectGetterPromise); } else if (containerXPath) appConfigPromiseGetterMap.set(appContainerXPathKey, parcelConfigObjectGetterPromise); @@ -171,7 +172,7 @@ export function loadMicroApp( microApp = mountRootParcel(memorizedLoadingFn, { domElement: document.createElement('div'), ...props }); - if (container) { + if (container && !disableCache) { if (containerXPath) { // Store the microApps which they mounted on the same container const microAppsRef = containerMicroAppsMap.get(appContainerXPathKey) || []; diff --git a/src/interfaces.ts b/src/interfaces.ts index a49afdfcf..f14bb661b 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -90,6 +90,10 @@ type QiankunSpecialOpts = { * skip some scripts or links intercept, like JSONP */ excludeAssetFilter?: (url: string) => boolean; + /** + * disable the cache when loading the same micro app multi times + */ + disableCache?: boolean; globalContext?: typeof window; };