Enable Discovery debug logging for production troubleshooting
- Add DISCOVERY_LOG_LEVEL=debug - Add DISCOVERY_SHOW_PROGRESS=true - Temporary changes for debugging InitializerProcessor fixes on production
This commit is contained in:
@@ -1,29 +1,239 @@
|
||||
|
||||
---
|
||||
# Link Prefetching System
|
||||
|
||||
## 🔧 Neue Funktionen:
|
||||
## 🚀 Overview
|
||||
|
||||
### `getPrefetched(href: string): string | null`
|
||||
Das erweiterte Prefetching-System für interne Links bietet mehrere Strategien zur Verbesserung der Navigation-Performance:
|
||||
|
||||
* Gibt den HTML-Text zurück, **falls gültig gecached**
|
||||
* Sonst `null`
|
||||
- **Hover Prefetching**: Lädt Seiten vor, wenn der Nutzer mit der Maus über Links fährt
|
||||
- **Visible Prefetching**: Lädt Links, die im Viewport sichtbar werden (Intersection Observer)
|
||||
- **Eager Prefetching**: Sofortiges Laden wichtiger Seiten
|
||||
- **Browser Hints**: Nutzt native `<link rel="prefetch">` für optimale Browser-Integration
|
||||
|
||||
### `prefetchHref(href: string): void`
|
||||
## 📋 Features
|
||||
|
||||
* Manuelles Prefetching von URLs
|
||||
* Wird nur ausgeführt, wenn nicht bereits gecached
|
||||
- ✅ Multiple Prefetch-Strategien (hover, visible, eager)
|
||||
- ✅ Intersection Observer für sichtbare Links
|
||||
- ✅ Intelligentes Cache-Management mit TTL
|
||||
- ✅ Priority-based Fetching (high/low)
|
||||
- ✅ Network-aware Configuration (4G, 3G, 2G)
|
||||
- ✅ Browser Prefetch Hints (`<link rel="prefetch">`)
|
||||
- ✅ Abort Controller für Timeout-Management
|
||||
- ✅ Performance Monitoring und Stats
|
||||
|
||||
---
|
||||
## 🔧 Basic Usage
|
||||
|
||||
## 🧪 Verwendung:
|
||||
### Mit dem Router
|
||||
|
||||
```js
|
||||
import { getPrefetched, prefetchHref } from './core/click-manager.js';
|
||||
import { startRouter } from './core/router.js';
|
||||
|
||||
prefetchHref('/about.html'); // manuelles Prefetching
|
||||
// Standard-Konfiguration
|
||||
startRouter({
|
||||
strategies: ['hover', 'visible'],
|
||||
hoverDelay: 150,
|
||||
observerMargin: '50px',
|
||||
maxCacheSize: 20,
|
||||
cacheTTL: 60000
|
||||
});
|
||||
```
|
||||
|
||||
const html = getPrefetched('/about.html');
|
||||
### Adaptive Konfiguration
|
||||
|
||||
```js
|
||||
import { startRouter } from './core/router.js';
|
||||
import { getAdaptiveConfig } from './core/prefetch-config.js';
|
||||
|
||||
// Passt sich automatisch an die Netzwerkverbindung an
|
||||
startRouter(getAdaptiveConfig());
|
||||
```
|
||||
|
||||
### Direkte API-Nutzung
|
||||
|
||||
```js
|
||||
import { getPrefetched, prefetchHref, prefetchUrls } from './core/ClickManager.js';
|
||||
|
||||
// Einzelne URL prefetchen
|
||||
prefetchHref('/about');
|
||||
|
||||
// Mehrere URLs prefetchen
|
||||
prefetchUrls(['/products', '/contact', '/team']);
|
||||
|
||||
// Gecachten Content abrufen
|
||||
const html = getPrefetched('/about');
|
||||
if (html) {
|
||||
render(html);
|
||||
render(html);
|
||||
}
|
||||
```
|
||||
|
||||
## 🎯 Prefetch Strategies
|
||||
|
||||
### 1. Hover Strategy
|
||||
Links werden vorgeladen, wenn der Nutzer mit der Maus darüber fährt:
|
||||
|
||||
```js
|
||||
{
|
||||
strategies: ['hover'],
|
||||
hoverDelay: 150 // Wartezeit in ms
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Visible Strategy
|
||||
Links werden vorgeladen, wenn sie in den Viewport kommen:
|
||||
|
||||
```js
|
||||
{
|
||||
strategies: ['visible'],
|
||||
observerMargin: '50px' // Lädt 50px bevor Link sichtbar wird
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Eager Strategy
|
||||
Wichtige Links sofort laden:
|
||||
|
||||
```html
|
||||
<!-- HTML Attribute -->
|
||||
<a href="/important-page" data-prefetch="eager">Important Link</a>
|
||||
```
|
||||
|
||||
```js
|
||||
// Oder programmatisch
|
||||
prefetchUrls(['/critical-path-1', '/critical-path-2']);
|
||||
```
|
||||
|
||||
### 4. Combined Strategies
|
||||
Mehrere Strategien kombinieren:
|
||||
|
||||
```js
|
||||
{
|
||||
strategies: ['hover', 'visible', 'eager'],
|
||||
// Weitere Optionen...
|
||||
}
|
||||
```
|
||||
|
||||
## ⚙️ Configuration Options
|
||||
|
||||
| Option | Type | Default | Description |
|
||||
|--------|------|---------|-------------|
|
||||
| `strategies` | Array | `['hover', 'visible']` | Aktive Prefetch-Strategien |
|
||||
| `hoverDelay` | Number | `150` | Verzögerung vor Hover-Prefetch (ms) |
|
||||
| `observerMargin` | String | `'50px'` | Intersection Observer Margin |
|
||||
| `maxCacheSize` | Number | `20` | Maximale Anzahl gecachter Seiten |
|
||||
| `cacheTTL` | Number | `60000` | Cache-Lebensdauer in ms |
|
||||
| `priority` | String | `'low'` | Fetch Priority (`'low'` oder `'high'`) |
|
||||
|
||||
## 📊 Performance Monitoring
|
||||
|
||||
```js
|
||||
import { getPrefetcher } from './core/ClickManager.js';
|
||||
|
||||
// Stats abrufen
|
||||
const prefetcher = getPrefetcher();
|
||||
const stats = prefetcher.getStats();
|
||||
|
||||
console.log(stats);
|
||||
// {
|
||||
// cacheSize: 5,
|
||||
// prefetching: 2,
|
||||
// prefetched: 10,
|
||||
// strategies: ['hover', 'visible']
|
||||
// }
|
||||
```
|
||||
|
||||
## 🎨 HTML Attributes
|
||||
|
||||
Links können mit speziellen Attributen gesteuert werden:
|
||||
|
||||
```html
|
||||
<!-- Eager Prefetch -->
|
||||
<a href="/page" data-prefetch="eager">Sofort laden</a>
|
||||
|
||||
<!-- Kein Prefetch -->
|
||||
<a href="/page" data-no-prefetch>Nicht vorladen</a>
|
||||
|
||||
<!-- View Transition -->
|
||||
<a href="/page" data-view-transition>Mit Animation</a>
|
||||
|
||||
<!-- Modal -->
|
||||
<a href="/page" data-modal>Als Modal öffnen</a>
|
||||
```
|
||||
|
||||
## 🌐 Network-Aware Configuration
|
||||
|
||||
```js
|
||||
import { getAdaptiveConfig } from './core/prefetch-config.js';
|
||||
|
||||
// Automatische Anpassung basierend auf:
|
||||
// - Connection.effectiveType (4g, 3g, 2g)
|
||||
// - Connection.saveData
|
||||
// - Device capabilities
|
||||
|
||||
const config = getAdaptiveConfig();
|
||||
startRouter(config);
|
||||
```
|
||||
|
||||
## 🚫 Ausnahmen
|
||||
|
||||
Folgende Links werden nicht geprefetcht:
|
||||
|
||||
- Externe Links (andere Domain)
|
||||
- Links mit `target="_blank"`
|
||||
- Download Links (`download` Attribute)
|
||||
- Hash Links (`#section`)
|
||||
- Links mit `data-no-prefetch`
|
||||
- `mailto:` und `tel:` Links
|
||||
|
||||
## 💡 Best Practices
|
||||
|
||||
1. **Mobile First**: Konservative Einstellungen für Mobile
|
||||
2. **Critical Path**: Wichtige Navigation-Links mit `data-prefetch="eager"`
|
||||
3. **Monitor Performance**: Cache-Stats überwachen
|
||||
4. **Network Detection**: Adaptive Config für verschiedene Verbindungen
|
||||
5. **User Preference**: `prefers-reduced-data` Media Query beachten
|
||||
|
||||
## 🔍 Debugging
|
||||
|
||||
```js
|
||||
// Debug Logging aktivieren
|
||||
localStorage.setItem('DEBUG', 'true');
|
||||
|
||||
// Prefetch Stats
|
||||
const stats = getPrefetcher().getStats();
|
||||
console.table(stats);
|
||||
|
||||
// Cache leeren
|
||||
getPrefetcher().clearCache();
|
||||
```
|
||||
|
||||
## 🎯 Beispiel-Konfigurationen
|
||||
|
||||
### Aggressive (Schnelle Verbindung)
|
||||
```js
|
||||
{
|
||||
strategies: ['hover', 'visible', 'eager'],
|
||||
hoverDelay: 50,
|
||||
observerMargin: '200px',
|
||||
maxCacheSize: 50,
|
||||
cacheTTL: 300000,
|
||||
priority: 'high'
|
||||
}
|
||||
```
|
||||
|
||||
### Conservative (Langsame Verbindung)
|
||||
```js
|
||||
{
|
||||
strategies: ['hover'],
|
||||
hoverDelay: 300,
|
||||
maxCacheSize: 10,
|
||||
cacheTTL: 30000,
|
||||
priority: 'low'
|
||||
}
|
||||
```
|
||||
|
||||
### Disabled
|
||||
```js
|
||||
{
|
||||
strategies: [],
|
||||
maxCacheSize: 0
|
||||
}
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user