fix: test prefetch and add doc

uct8086 · Nov 8, 2023 · 3299ff5 · 3299ff5
1 parent 2656f75
commit 3299ff5
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 2 deletions.
diff --git a/dev/main-react16/src/pages/vue2/vue2.js b/dev/main-react16/src/pages/vue2/vue2.js
@@ -9,6 +9,13 @@ import config from '../../config'
 import './vue2.less'
 import lessStyles from './module.less'
 
+microApp.start({
+  preFetchApps: [
+    { name: 'my-app1', url: 'https://storage.360buyimg.com/launch/zeromock/umd-module.js', level: 3 }, // 加载资源并解析
+  ],
+})
+
+
 const antIcon = <LoadingOutlined style={{ fontSize: 30 }} spin />
 
 function Vue2 () {
@@ -18,6 +25,10 @@ function Vue2 () {
   function mounted () {
     console.timeEnd('mounted-vue2')
     console.log('生命周期：mounted -- vue2', document.querySelector('micro-app'))
+    microApp.preFetch([
+      { name: 'my-app1', url: 'https://storage.360buyimg.com/launch/zeromock/umd-module.js', level: 3 }, // 加载资源并解析
+    ])
+
     hideLoading(false)
   }
 

diff --git a/docs/zh-cn/advanced.md b/docs/zh-cn/advanced.md
@@ -34,3 +34,20 @@ microApp.start({
 
 > [!NOTE]
 > 1、如果跨域请求带cookie，那么`Access-Control-Allow-Origin`不能设置为`*`，必须指定域名，同时设置`Access-Control-Allow-Credentials: true`
+
+## 2、微组件
+
+一个正常的 micro-app 子应用可以这样注册：
+
+```js
+<micro-app name='my-app' url='http://localhost:3000/'></micro-app>
+```
+
+为了实现加载js文件实现微组件的能力，我们url属性将以前仅支持html地址，升级成既支持html地址，也支持js等模块化文件。用法如下：
+
+```js
+<micro-app name='xx' url='http://xxx.js'></micro-app>
+```
+
+> [!NOTE]
+> 1、微组件只是极个别场景下的解决方案（目前识别到的只有扩展点和细粒度重构），其他场景并不建议使用微组件。
diff --git a/src/__tests__/unit/mocks/app.ts b/src/__tests__/unit/mocks/app.ts
@@ -1,3 +1,5 @@
 export const MOCK_APP_URL = 'http://localhost:6666/'
 
 export const MOCK_APP_URL_UMD = 'https://storage.360buyimg.com/launch/zeromock/umd-module.js'
+
+export const MOCK_APP_URL_UMD_OTHER = 'https://storage.360buyimg.com/launch/zeromock/umd-module-cpoy.js'
diff --git a/src/source/loader/html.ts b/src/source/loader/html.ts
@@ -24,8 +24,7 @@ export class HTMLLoader implements IHTMLLoader {
   public run (app: AppInterface, successCb: CallableFunction): void {
     const appName = app.name
     const htmlUrl = app.ssrUrl || app.url
-    const regex = /\.js$/
-    const htmlPromise = regex.test(htmlUrl)
+    const htmlPromise = htmlUrl.includes('.js')
       ? Promise.resolve(`<micro-app-head><script src='${htmlUrl}'></script></micro-app-head><micro-app-body></micro-app-body>`)
       : fetchSource(htmlUrl, appName, { cache: 'no-cache' })
     htmlPromise.then((htmlStr: string) => {