解决qiankun微前端中子应用首次加载白屏问题

问题现象分析

在使用qiankun微前端框架时，开发者经常遇到一个典型问题：当主应用通过某个路由页面加载子应用后，首次跳转子应用时会出现白屏现象，而刷新页面后却能正常显示。这种情况在主应用和子应用都使用history路由模式时尤为常见。

问题本质

这种现象的根本原因在于子应用的路由系统与qiankun的加载机制之间存在时序问题。具体表现为：

1. 子应用的JavaScript资源加载完成前，路由跳转已经发生
2. 子应用的挂载逻辑未能正确执行
3. 子应用的路由守卫或初始化逻辑未能及时生效

解决方案比较

方案一：使用loadMicroApp动态加载

loadMicroApp是qiankun提供的手动加载子应用的API，相比自动挂载方式，它提供了更精细的控制能力：

import { loadMicroApp } from 'qiankun';

// 在路由守卫或组件生命周期中调用
const microApp = loadMicroApp({
  name: 'sub-app',
  entry: '//localhost:7100',
  container: '#subapp-container',
});

优点：

• 可以精确控制加载时机
• 避免自动挂载的时序问题
• 适用于复杂路由场景

缺点：

• 需要手动管理子应用生命周期
• 代码复杂度增加

方案二：优化子应用挂载逻辑

对于希望保持自动挂载的开发者，可以优化子应用的入口文件：

// 子应用入口文件
let app = null;

function render(props) {
  const { container } = props;
  app = new Vue({
    router,
    store,
    render: h => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时直接挂载
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function mount(props) {
  render(props);
}

export async function bootstrap() {
  console.log('subapp bootstraped');
}

export async function unmount(props) {
  if (app) {
    app.$destroy();
    app.$el.innerHTML = '';
    app = null;
  }
}

最佳实践建议

1. 路由同步：确保主应用和子应用的路由状态保持同步
2. 加载状态管理：在子应用加载期间显示loading状态
3. 错误处理：添加子应用加载失败的回退机制
4. 性能优化：预加载子应用资源，减少首次加载时间

总结

qiankun微前端框架中子应用白屏问题通常是由于加载时序导致的，开发者可以根据项目复杂度选择适合的解决方案。对于简单场景，优化子应用挂载逻辑即可；对于复杂路由场景，推荐使用loadMicroApp进行更精细的控制。无论采用哪种方案，良好的错误处理和加载状态管理都是提升用户体验的关键。