bailicangdu

bailicangdu

水光潋滟晴方好,山色空蒙雨亦奇。

Member Since 5 years ago

jd.com, Shanghai, China

Experience Points
1.29w
follower
Lessons Completed
19
follow
Lessons Completed
155
stars
Best Reply Awards
22
repos

737 contributions in the last year

Pinned
⚡ A lightweight, efficient and powerful micro front-end framework. 一款轻量、高效、功能强大的微前端框架
⚡ 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
⚡ 基于 node.js + Mongodb 构建的后台系统
⚡ 基于 vue + element-ui 的后台管理系统
⚡ vue2 + vue-router + vuex 入门项目
⚡ 一个 react + redux 的完整项目 和 个人总结
Activity
May
23
1 day ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

问下 有没什么辅助手段方案解决子应用首次加载白屏的等待时长长的问题

问下 有没什么辅助手段方案解决子应用首次加载白屏的等待时长长的问题

bailicangdu
bailicangdu

对于非首屏,可以使用预加载

May
21
3 days ago
May
20
4 days ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

官方示例 start 函数配置 destory true,切换子应用,内存持续增加

问题表现: 配置 destory: true 后,连续切换子应用,内存持续增加。

仓库: https://github.com/micro-zoe/micro-app-demo

重现步骤: 测试1:任务管理器

  1. 在 main_apps/react16/src/index.js 配置 start 函数,增加 destroy: true, 配置。
  2. yarn dev:main-react16
  3. 访问首页,不打开控制台,打开浏览器任务管理器。
  4. 连续切换 vue2, vue3, vue-vite, nextjs11, nuxtjs2 5个子应用,循环8次,每次循环结束后等待15s GC,然后查看内存。 image

测试2:控制台内存查看

  1. 打开控制台的内存 tab,点击收集垃圾,选择时间线配置
  2. 记录,连续切换 vue2, vue3, vue-vite, nextjs11, nuxtjs2 5个子应用,循环4次。
  3. 点击收集垃圾,然后停止记录 image

测试3: 配置 destory: false

  1. 在 main_apps/react16/src/index.js 配置 start 函数,增加 destroy: false, 配置。
  2. 打开控制台的内存 tab,点击收集垃圾,选择时间线配置
  3. 记录,连续切换 vue2, vue3, vue-vite, nextjs11, nuxtjs2 5个子应用,循环4次。
  4. 点击收集垃圾,然后停止记录 image

另外,在 destory: true模式下,第二次进入 react16, react 17 子应用报错,这又是另外的问题了。

环境信息

  • micro-app版本:0.8
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

官方示例 start 函数配置 destory true,切换子应用,内存持续增加

问题表现: 配置 destory: true 后,连续切换子应用,内存持续增加。

仓库: https://github.com/micro-zoe/micro-app-demo

重现步骤: 测试1:任务管理器

  1. 在 main_apps/react16/src/index.js 配置 start 函数,增加 destroy: true, 配置。
  2. yarn dev:main-react16
  3. 访问首页,不打开控制台,打开浏览器任务管理器。
  4. 连续切换 vue2, vue3, vue-vite, nextjs11, nuxtjs2 5个子应用,循环8次,每次循环结束后等待15s GC,然后查看内存。 image

测试2:控制台内存查看

  1. 打开控制台的内存 tab,点击收集垃圾,选择时间线配置
  2. 记录,连续切换 vue2, vue3, vue-vite, nextjs11, nuxtjs2 5个子应用,循环4次。
  3. 点击收集垃圾,然后停止记录 image

测试3: 配置 destory: false

  1. 在 main_apps/react16/src/index.js 配置 start 函数,增加 destroy: false, 配置。
  2. 打开控制台的内存 tab,点击收集垃圾,选择时间线配置
  3. 记录,连续切换 vue2, vue3, vue-vite, nextjs11, nuxtjs2 5个子应用,循环4次。
  4. 点击收集垃圾,然后停止记录 image

另外,在 destory: true模式下,第二次进入 react16, react 17 子应用报错,这又是另外的问题了。

环境信息

  • micro-app版本:0.8
bailicangdu
bailicangdu
May
13
1 week ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

打开子应用的资源能能否携带自定义请求头

打开子应用的资源能能否携带自定义请求头

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

Vue 子应用通过创建 script 标签加载 库打包模式的 Vue 组件时无法正确设置 publicpath

image

问题: 子应用有些资源是通过 Vue 库打包模式构建上传的 cdn 的,vue 的库打包通过 currentScript 动态设置 publicpath,但在 microapp 内失效。

期望:子应用通过创建 script js 包内需要通过 window.document.currentScript 来设置 其内部资源的 publicpath。

参考: https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93

bailicangdu
bailicangdu

问题已经定位,接下来会进行处理

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

angular里通过loadChildren惰性加载的应用作为子应用会报错

问题描述

问题的具体描述 angular里可能某种嵌套通过loadChildren惰性加载的应用作为子应用会报错? 不确定根本原因,报错截图里的load.script脚本请求地址不对,4200是基座端口,不是子应用的端口,导致请求不到?我通过插件、配置等方式貌似也改不了该加载地址。

复现步骤

可能的,我也不确定到底怎么复现

  1. 一个模块设置为惰性加载,里面还有惰性加载 2.作为子应用嵌入

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。

loadChildren: () =>
                    import('./dashboard/dashboard.module').then((m) => m.DashboardModule),

image

复现仓库

请提供一个精简的代码仓库,然后上传到自己的 github,以帮助我们复现您的问题。

环境信息

  • micro-app版本:最新版
  • 主应用前端框架&版本:Angular12
  • 子应用前端框架&版本:Angular12
  • 构建工具&版本:Ng Cli
bailicangdu
bailicangdu

将子应用首页改成非懒加载的试一下呢

May
7
2 weeks ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

子应用如果配置的有externals,会报错

子应用 配置

    config.externals({
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios',
      echarts: 'echarts',
      'element-ui': 'ELEMENT',

    })

主应用报错 image

May
5
2 weeks ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

create angular 8 cli project,route is match,but not fectched project,see below 2 pictures

create angular 8 cli project,route is match,but not fectched project,see below 2 pictures,知道是什么原因?

image image

bailicangdu
bailicangdu

最好能提供一个建议的demo帮助我们复现问题

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

子应用window相关,有大佬能解答下吗

子应用中 window.a= 1; window.rawWindow.b = 1; 打印window window = { a:1, b:1, rawWindow: {b:1} } 为什么window.rawWindow.a是 undefind

bailicangdu
bailicangdu

a是子应用的变量,不属于原生window

May
4
2 weeks ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

create angular 8 cli project,route is match,but not fectched project,see below 2 pictures

create angular 8 cli project,route is match,but not fectched project,see below 2 pictures,知道是什么原因?

image image

bailicangdu
bailicangdu

4200是基座端口吗,从基座路由开始就配置错了

May
3
3 weeks ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

create angular 8 cli project,route is match,but not fectched project,see below 2 pictures

create angular 8 cli project,route is match,but not fectched project,see below 2 pictures,知道是什么原因?

image image

bailicangdu
bailicangdu

路由设置的问题吧,代码贴一下呢

Apr
28
3 weeks ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

基座热更新,报错Uncaught Error: Iframe has not been created yet.

问题描述

基座是react 17.02,之前出现过热更新时提示 process is not defined,后来根据这个方法修改https://stackoverflow.com/a/70402397 现在保存会出现Uncaught Error: Iframe has not been created yet.

如果不加载子应用,即主应用的microApp.start() 不调用,热更新正常,调用之后会报错

报错代码的对应位置: https://github.com/facebook/create-react-app/blob/bb64e31a81eb12d688c14713dce812143688750a/packages/react-error-overlay/src/index.js#L163

复现步骤

上传截图

image

create-react-app 里有类似的issue https://github.com/facebook/create-react-app/issues/10865

复现仓库

请提供一个精简的代码仓库,然后上传到自己的 github,以帮助我们复现您的问题。

环境信息

  • micro-app版本:0.8.5
  • 主应用前端框架&版本:17.0.1
  • 子应用前端框架&版本:17.0.1
  • 构建工具&版本:webpack4 create-react-app4
bailicangdu
bailicangdu
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

基座热更新,报错Uncaught Error: Iframe has not been created yet.

问题描述

基座是react 17.02,之前出现过热更新时提示 process is not defined,后来根据这个方法修改https://stackoverflow.com/a/70402397 现在保存会出现Uncaught Error: Iframe has not been created yet.

如果不加载子应用,即主应用的microApp.start() 不调用,热更新正常,调用之后会报错

报错代码的对应位置: https://github.com/facebook/create-react-app/blob/bb64e31a81eb12d688c14713dce812143688750a/packages/react-error-overlay/src/index.js#L163

复现步骤

上传截图

image

create-react-app 里有类似的issue https://github.com/facebook/create-react-app/issues/10865

复现仓库

请提供一个精简的代码仓库,然后上传到自己的 github,以帮助我们复现您的问题。

环境信息

  • micro-app版本:0.8.5
  • 主应用前端框架&版本:17.0.1
  • 子应用前端框架&版本:17.0.1
  • 构建工具&版本:webpack4 create-react-app4
bailicangdu
bailicangdu

这个问题暂时只能关闭热更新

Apr
27
3 weeks ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

feat: 修复react 17以下使用shadow dom事件捕获错误

feat: 修复react 17以下使用shadow dom事件捕获错误

bailicangdu
bailicangdu

不排除子应用需要监听document事件的情况,尤其是对于第三方ui库中的组件,为了解决一个问题,会引入另外的问题

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

feat: 修复react 17以下使用shadow dom事件捕获错误

feat: 修复react 17以下使用shadow dom事件捕获错误

bailicangdu
bailicangdu

比如vue子应用开启shadowDom,添加到document的事件是否会失效?

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

feat: 修复react 17以下使用shadow dom事件捕获错误

feat: 修复react 17以下使用shadow dom事件捕获错误

bailicangdu
bailicangdu

其他框架下都测试过吗

Apr
26
4 weeks ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

子应用弹窗能全屏么?现在是element-plus 的 dialog 组件设置 append-to-body 为 true后,追加不到基座的body里,还是只能追加在子应用里

image
bailicangdu
bailicangdu

只能通过修改css自行解决

Apr
25
4 weeks ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

为什么子应用内的documen !== window.rawDocument,但window === window.rawWindow

问题描述

问题的具体描述 为什么子应用内的documen === window.rawDocument,但window !== window.rawWindow

复现步骤

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。

复现仓库

请提供一个精简的代码仓库,然后上传到自己的 github,以帮助我们复现您的问题。

环境信息

  • micro-app版本:
  • 主应用前端框架&版本:
  • 子应用前端框架&版本:
  • 构建工具&版本:
bailicangdu
bailicangdu

子应用的window是代理对象,不是rawWindow

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

基座下业务应用动态创建script标签资源跨域

问题描述

基座下单个业务用到了腾讯地图,业务应用单独访问正常,基座下访问动态加载远程js跨域 ,怀疑动态创建script 挂载在body 下基座代理fetch执行安全策略拦截掉了

复现步骤

  1. 使用 qqmap-plus 初始化腾讯地图
import qqmapPlus from 'qqmap-plus'
     qqmapPlus.init('api-key', () => {
            const options = {
              center: new qq.maps.LatLng(position.coords.latitude, position.coords.longitude),
              zoom: this.zoom
            }
            this.map = new qq.maps.Map(container, options)
          }, ['geometry'])

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。 正常访问类型为script image 跨域为fetch image

image 正常无origin 头 image 基座下执行带有origin头,跨域 image

复现仓库

请提供一个精简的代码仓库,然后上传到自己的 github,以帮助我们复现您的问题。

环境信息

bailicangdu
bailicangdu

地图js属于第三方文件,无法要求第三方设置跨域,所以只能采用降级方案,放入基座或者下载到本地

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

列表到详情页多次使用浏览器前进后退,在详情页跳转另一个应用时报错

问题描述

问题的具体描述

复现步骤

账号密码随意 登录后

  1. 从test1-1 点击跳转详情页再点浏览器返回 2.重复操作几次,从详情页点击test2(另一个子应用)的菜单 3.控制台报错

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。

image

复现仓库

请提供一个精简的代码仓库,然后上传到自己的 github,以帮助我们复现您的问题。 https://github.com/NicCraver/microapp-demo

环境信息

  • micro-app版本:0.8.5
  • 主应用前端框架&版本:"vue": "^3.2.31"
  • 子应用前端框架&版本:"vue": "^2.6.11",
  • 构建工具&版本:@vue/cli 4.5.15
bailicangdu
bailicangdu

我能避免这个问题吗,是否是因为我的跳转方法不对,或者路由有问题,大佬能帮忙看一下代码吗

涉及到vue-router4的实现原理,它会在每次push前先执行replace,使用history.state.current替换当前路由信息。因为根据demo只复现了一次,之后再也无法复现,暂时猜测是因为子应用同时修改了history.state导致current为undefined,子应用在跳转时拼接地址成 http://localhost:3001undefined,导致报错。

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

基座下业务应用动态创建script标签资源跨域

问题描述

基座下单个业务用到了腾讯地图,业务应用单独访问正常,基座下访问动态加载远程js跨域 ,怀疑动态创建script 挂载在body 下基座代理fetch执行安全策略拦截掉了

复现步骤

  1. 使用 qqmap-plus 初始化腾讯地图
import qqmapPlus from 'qqmap-plus'
     qqmapPlus.init('api-key', () => {
            const options = {
              center: new qq.maps.LatLng(position.coords.latitude, position.coords.longitude),
              zoom: this.zoom
            }
            this.map = new qq.maps.Map(container, options)
          }, ['geometry'])

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。 正常访问类型为script image 跨域为fetch image

image 正常无origin 头 image 基座下执行带有origin头,跨域 image

复现仓库

请提供一个精简的代码仓库,然后上传到自己的 github,以帮助我们复现您的问题。

环境信息

bailicangdu
bailicangdu

可以将地图js放在基座中加载避免这个问题

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

关于自定义fetch功能的建议

背景

现在的自定义fetch功能,只能用于拦截静态资源。 在这种模式下,想要请求后端接口,只能修改子应用(1. 打包模式;2.接口封装时判断运行环境)。 但是如果自定义fetch可以拦截动态的接口,那么我可以真正做到对子应用的零修改,直接通过拦截和proxy配置即可(如下)。

microApp.start({
  fetch(url, options, appName) {
    if (url.includes("/api")) {
      return window
        .fetch(url.replace("/api", `/${appName}/api`), options)
        .then((res) => {
          return res.text();
        });
    } else {
      return window.fetch(url, options).then((res) => {
        return res.text();
      });
    }
  },
});

期望的回复

  1. 我所说背景是否是我自己理解错误?
  2. 这样设计模式的原因是什么?
  3. 后期有无意愿实现类似功能?
bailicangdu
bailicangdu

这个fetch只是在框架层面拦截资源,不涉及接口,子应用的接口请求也有可能用到ajax

Apr
22
1 month ago
push

bailicangdu push micro-zoe/micro-app

bailicangdu
bailicangdu

Merge pull request #375 from kunl/patch-1

fix:页面宽度大于2000px,内容遮挡

commit sha: 8ffc792ebd6932d0a05ce3bd9b889196b9ebdb74

push time in 1 month ago
pull request

bailicangdu pull request micro-zoe/micro-app

bailicangdu
bailicangdu

fix:页面宽度大于2000px,内容遮挡

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

两个月没更新了,是毕业了吗?后面还继续维护吗

bailicangdu
bailicangdu

受上海疫情影响,人被隔离,近期进度会比较缓慢

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

列表到详情页多次使用浏览器前进后退,在详情页跳转另一个应用时报错

问题描述

问题的具体描述

复现步骤

账号密码随意 登录后

  1. 从test1-1 点击跳转详情页再点浏览器返回 2.重复操作几次,从详情页点击test2(另一个子应用)的菜单 3.控制台报错

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。

image

复现仓库

请提供一个精简的代码仓库,然后上传到自己的 github,以帮助我们复现您的问题。 https://github.com/NicCraver/microapp-demo

环境信息

  • micro-app版本:0.8.5
  • 主应用前端框架&版本:"vue": "^3.2.31"
  • 子应用前端框架&版本:"vue": "^2.6.11",
  • 构建工具&版本:@vue/cli 4.5.15
bailicangdu
bailicangdu

问题不能稳定复现,初步推测是vue-router4的问题,我们会在下一个版本推出路由隔离,可以避免这个问题

有具体时间吗,希望可以在我的项目上线之前解决这个问题,大佬加油

受上海疫情影响,计划推迟,具体时间不确定

Apr
21
1 month ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

应用已存在什么意思

index.esm.js?94a1:55 [micro-app] app xxx: app name conflict, an app named ibi is running 有人遇见过这个问题吗?怎么解决呢

bailicangdu
bailicangdu

micro-app name值重复了,仔细检查一下逻辑

Previous