What sub-application loading methods does Garfish support, and how to choose the appropriate loading strategy based on scenarios?

Garfish supports multiple sub-application loading methods to accommodate different scenarios and performance requirements.

Loading Methods

1. Synchronous Loading

• Characteristics: Load sub-applications immediately when the main application starts
• Use Cases: Core sub-applications, features that must be used immediately
• Advantages: Fast first access, no waiting required
• Disadvantages: Long main application startup time, high resource usage
• Configuration Example:

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

2. Asynchronous Loading

• Characteristics: Load sub-applications only when needed
• Use Cases: Non-core features, on-demand modules
• Advantages: Reduces initial loading time, saves resources
• Disadvantages: Need to wait for loading when first accessing sub-applications
• Configuration Example:

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

3. Preloading

• Characteristics: Preload sub-applications when the main application is idle
• Use Cases: Sub-applications that may be accessed, improving user experience
• Advantages: No waiting when accessing, good user experience
• Disadvantages: Occupies network and memory resources
• Configuration Example:

javascript
{
  name: 'dashboard',
  entry: '//localhost:3003',
  activeWhen: '/dashboard',
  loadMode: 'preload',
  preloadDelay: 2000 // Preload after 2 seconds delay
}

4. Lazy Loading

• Characteristics: Start loading only on first access
• Use Cases: Infrequently used features, large modules
• Advantages: Maximizes resource savings
• Disadvantages: Delay on first access
• Configuration Example:

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

Loading Strategy Selection

Based on Business Importance

• Core Business: Synchronous or preloading
• Secondary Business: Asynchronous loading
• Auxiliary Features: Lazy loading

Based on Access Frequency

• High Frequency: Preloading or synchronous loading
• Medium Frequency: Asynchronous loading
• Low Frequency: Lazy loading

Based on Resource Size

• Small Applications: Synchronous loading
• Medium Applications: Asynchronous loading
• Large Applications: Lazy loading

Performance Optimization Techniques

1. Resource Compression

• Compress JavaScript and CSS files
• Use Webpack's code splitting feature
• Enable Gzip or Brotli compression

2. Caching Strategy

• Properly set HTTP cache headers
• Use Service Worker to cache resources
• Implement sub-application caching mechanism

3. Parallel Loading

• Support parallel loading of multiple sub-applications
• Use CDN to accelerate resource loading
• Optimize network requests

4. Loading Priority

• Set loading priority for sub-applications
• Prioritize loading critical resources
• Delay loading non-critical resources

Monitoring and Debugging

Loading Status Monitoring

• Listen to sub-application loading events
• Record loading time and success rate
• Statistics on loading failure reasons

Error Handling

• Implement fallback solutions for loading failures
• Provide friendly error messages
• Automatic retry mechanism

Reasonable selection of loading strategies can significantly improve the performance and user experience of micro-frontend applications.