diff --git a/dev/children/react16/src/index.js b/dev/children/react16/src/index.js index 716bec293..c754c8e8b 100644 --- a/dev/children/react16/src/index.js +++ b/dev/children/react16/src/index.js @@ -256,3 +256,13 @@ if (window.__MICRO_APP_ENVIRONMENT__) { unBoundDom2.innerHTML = 'unBoundDom2' document.body.appendChild(unBoundDom2) } + +// test excludeAssetFilter +const dynamicScript2 = document.createElement('script') +dynamicScript2.setAttribute('src', 'http://127.0.0.1:8080/js/defer.js') +dynamicScript2.setAttribute('defer', 'true') +document.body.appendChild(dynamicScript2) + +const link1 = document.createElement('link') +link1.setAttribute('href', 'http://127.0.0.1:8080/facefont.css') +document.head.appendChild(link1) diff --git a/dev/main-react16/src/global.jsx b/dev/main-react16/src/global.jsx index d5b96fb40..8cdf42ac3 100644 --- a/dev/main-react16/src/global.jsx +++ b/dev/main-react16/src/global.jsx @@ -126,6 +126,14 @@ microApp.start({ return res.text() }) }, + excludeAssetFilter (assetUrl) { + if (assetUrl === 'http://127.0.0.1:8080/js/defer.js') { + return true + } else if (assetUrl === 'http://127.0.0.1:8080/facefont.css') { + return true + } + return false + } }) // ----------------------分割线--测试全局方法--------------------- // diff --git a/docs/zh-cn/api.md b/docs/zh-cn/api.md index 0574cf04b..542755282 100644 --- a/docs/zh-cn/api.md +++ b/docs/zh-cn/api.md @@ -84,6 +84,8 @@ start (options?: { js?: string[], // js地址 css?: string[], // css地址 }, + // 指定部分特殊的动态加载的微应用资源(css/js) 不被 micro-app 劫持处理 + excludeAssetFilter?: (assetUrl: string) => boolean }) ``` diff --git a/docs/zh-cn/static-source.md b/docs/zh-cn/static-source.md index ff5e4c0f7..435a84c0b 100644 --- a/docs/zh-cn/static-source.md +++ b/docs/zh-cn/static-source.md @@ -79,7 +79,25 @@ microApp.start({ ``` ## 资源过滤 -当子应用不需要加载某个js或css,可以通过在link、script、style设置exclude属性过滤这些资源,当micro-app遇到带有exclude属性的元素会进行删除。 +#### 方式一:excludeAssetFilter +在start中注册excludeAssetFilter过滤函数,可以指定部分特殊的动态加载的微应用资源(css/js) 不被 micro-app 劫持处理。 + +```js +// index.js +import microApp from '@micro-zoe/micro-app' + +microApp.start({ + excludeAssetFilter (assetUrl) { + if (assetUrl === 'xxx') { + return true // 返回true则micro-app不会劫持处理当前文件 + } + return false + } +}) +``` + +#### 方式二:配置 exclude 属性 +在link、script、style等元素上设置exclude属性过滤这些资源,当micro-app遇到带有exclude属性的元素会进行删除。 **使用方式** ```html diff --git a/src/micro_app.ts b/src/micro_app.ts index 12203b62b..b86dd07b4 100644 --- a/src/micro_app.ts +++ b/src/micro_app.ts @@ -126,6 +126,7 @@ export class MicroApp extends EventCenterForBaseApp implements MicroAppConfigTyp plugins?: plugins fetch?: fetchType preFetch = preFetch + excludeAssetFilter?: (assetUrl: string) => boolean start (options?: OptionsType): void { if (!isBrowser || !window.customElements) { return logError('micro-app is not supported in this environment') @@ -168,6 +169,8 @@ export class MicroApp extends EventCenterForBaseApp implements MicroAppConfigTyp // load global assets when browser is idle options.globalAssets && getGlobalAssets(options.globalAssets) + isFunction(options.excludeAssetFilter) && (this.excludeAssetFilter = options.excludeAssetFilter) + if (isPlainObject(options.plugins)) { const modules = options.plugins!.modules if (isPlainObject(modules)) { diff --git a/src/source/patch.ts b/src/source/patch.ts index 2061cf77f..2a1d870ec 100644 --- a/src/source/patch.ts +++ b/src/source/patch.ts @@ -10,6 +10,7 @@ import { isString, isInvalidQuerySelectorKey, isUniqueElement, + isFunction, } from '../libs/utils' import scopedCSS from './scoped_css' import { extractLinkFromHtml, formatDynamicLink } from './links' @@ -41,7 +42,15 @@ function handleNewNode (parent: Node, child: Node, app: AppInterface): Node { const linkReplaceComment = document.createComment('link element with exclude attribute ignored by micro-app') dynamicElementInMicroAppMap.set(child, linkReplaceComment) return linkReplaceComment - } else if (child.hasAttribute('ignore') || checkIgnoreUrl(child.getAttribute('href'), app.name)) { + } else if ( + child.hasAttribute('ignore') || + checkIgnoreUrl(child.getAttribute('href'), app.name) || + ( + child.href && + isFunction(microApp.excludeAssetFilter) && + microApp.excludeAssetFilter!(child.href) + ) + ) { return child } @@ -65,6 +74,14 @@ function handleNewNode (parent: Node, child: Node, app: AppInterface): Node { return child } else if (child instanceof HTMLScriptElement) { + if ( + child.src && + isFunction(microApp.excludeAssetFilter) && + microApp.excludeAssetFilter!(child.src) + ) { + return child + } + const { replaceComment, url, info } = extractScriptElement( child, parent, diff --git a/typings/global.d.ts b/typings/global.d.ts index 61e1c5553..2873e6b13 100644 --- a/typings/global.d.ts +++ b/typings/global.d.ts @@ -188,6 +188,7 @@ declare module '@micro-app/types' { plugins?: plugins fetch?: fetchType globalAssets?: globalAssetsType, + excludeAssetFilter?: (assetUrl: string) => boolean } // MicroApp config @@ -203,6 +204,7 @@ declare module '@micro-app/types' { plugins?: plugins fetch?: fetchType preFetch(apps: prefetchParamList): void + excludeAssetFilter?: (assetUrl: string) => boolean start(options?: OptionsType): void }