Garfish 支持哪些子应用加载方式，如何根据场景选择合适的加载策略？

Garfish 支持多种子应用加载方式，以适应不同的场景和性能需求。

加载方式

1. 同步加载

• 特点：在主应用启动时立即加载子应用
• 适用场景：核心子应用、必须立即使用的功能
• 优势：首次访问速度快，无需等待
• 劣势：主应用启动时间长，资源占用大
• 配置示例：

javascript
{
  name: 'core-app',
  entry: '//localhost:3001',
  activeWhen: '/core',
  loadMode: 'sync'
}

2. 异步加载

• 特点：在需要时才加载子应用
• 适用场景：非核心功能、按需加载的模块
• 优势：减少初始加载时间，节省资源
• 劣势：首次访问子应用时需要等待加载
• 配置示例：

javascript
{
  name: 'feature-app',
  entry: '//localhost:3002',
  activeWhen: '/feature',
  loadMode: 'async'
}

3. 预加载

• 特点：在主应用空闲时提前加载子应用
• 适用场景：可能被访问的子应用、提升用户体验
• 优势：访问时无需等待，用户体验好
• 劣势：占用网络和内存资源
• 配置示例：

javascript
{
  name: 'dashboard',
  entry: '//localhost:3003',
  activeWhen: '/dashboard',
  loadMode: 'preload',
  preloadDelay: 2000 // 延迟2秒后预加载
}

4. 懒加载

• 特点：首次访问时才开始加载
• 适用场景：低频使用的功能、大型模块
• 优势：最大化节省资源
• 劣势：首次访问有延迟
• 配置示例：

javascript
{
  name: 'settings',
  entry: '//localhost:3004',
  activeWhen: '/settings',
  loadMode: 'lazy'
}

加载策略选择

基于业务重要性

• 核心业务：同步加载或预加载
• 次要业务：异步加载
• 辅助功能：懒加载

基于访问频率

• 高频访问：预加载或同步加载
• 中频访问：异步加载
• 低频访问：懒加载

基于资源大小

• 小型应用：同步加载
• 中型应用：异步加载
• 大型应用：懒加载

性能优化技巧

1. 资源压缩

• 压缩 JavaScript 和 CSS 文件
• 使用 Webpack 的代码分割功能
• 启用 Gzip 或 Brotli 压缩

2. 缓存策略

• 合理设置 HTTP 缓存头
• 使用 Service Worker 缓存资源
• 实现子应用缓存机制

3. 并行加载

• 支持多个子应用并行加载
• 使用 CDN 加速资源加载
• 优化网络请求

4. 加载优先级

• 设置子应用的加载优先级
• 优先加载关键资源
• 延迟加载非关键资源

监控与调试

加载状态监控

• 监听子应用加载事件
• 记录加载时间和成功率
• 统计加载失败原因

错误处理

• 实现加载失败的降级方案
• 提供友好的错误提示
• 自动重试机制

合理选择加载策略可以显著提升微前端应用的性能和用户体验。