Vad är Hugos byggcache och hur fungerar den?

Hugos byggcache lagrar renderad innehåll och bearbetade tillgångar för att påskynda efterföljande byggnader. Den finns i katalogen resources/_gen och cachen innehåller bearbetade bilder, CSS, JavaScript och renderade mallar. Hugo använder automatiskt denna cache för att undvika ombehandling av obearbetat innehåll, vilket betydligt minskar byggtiden för stora webbplatser.

Hur aktiverar jag inkrementella byggnader i Hugo?

Använd flaggan --ignoreCache för att inaktivera cachning eller hugo server med --disableFastRender för att tvinga fullständiga ombyggnader. För incrementella byggnader, kör bara hugo utan flaggor—Hugo använder automatiskt cachad innehåll när källfiler inte har ändrats. Miljövariabeln HUGO_CACHEDIR kan ange en anpassad cache-plats.

Vilka HTTP-headrar bör jag ställa in för statiska tillgångar i Hugo?

Använd aggressivt cachning för statiska tillgångar (CSS, JS, bilder) - Cache-Control: public, max-age=31536000, immutable (1 år). För HTML-sidor, använd kortare cachningstider - Cache-Control: public, max-age=3600 (1 timme) med ETag eller Last-Modified headers. Detta tillåter webbläsare att cachning tillgångar långsiktigt medan HTML hålls uppdaterat.

Hur konfigurerar jag CDN-caching för en Hugo-webbplats?

Konfigurera ditt CDN (CloudFront, Cloudflare, etc.) för att cachning av statiska tillgångar med långa TTL (1 år) och HTML med kortare TTL (1 timme). Ställ in cache-invalidering vid distributioner. För CloudFront, använd cloudFrontDistributionID i Hugos distributionskonfiguration. Aktivera komprimering (gzip/brotli) och ställ in lämpliga cache-beteenden baserat på filändelser.

Bör jag använda service workers för Hugo-webbplatser?

Tjänstearbetare kan erbjuda offline-funktionalitet och förbättra upplevd prestanda, men de är valfria för statiska webbplatser. De är mest fördelaktiga för webbplatser som behöver offline-åtkomst eller vill implementera avancerade cachningsstrategier. För de flesta Hugo-webbplatser är CDN-cachning och korrekta HTTP-huvuden tillräckliga. Överväg tjänstearbetare om du behöver offline-first-funktionalitet eller vill förcacha kritiska tillgångar.

Hur konfigurerar jag Hugo:s filcacher?

Konfigurera filcacher i din config.toml med hjälp av avsnittet [caches] . Hugo stöder flera cachtyper - assets , images , getjson , getcsv , getresource , misc , och modules . Varje cachtyp har alternativ dir (katalogsökväg) och maxAge (utgångstid). Använd token som :cacheDir , :resourceDir , och :project för dynamiska sökvägar. Angev maxAge till -1 för permanent cachning, 0 för att inaktivera eller ett positivt tal för tidsbaserad utgång. Se Hugo cachekonfigurationsdokumentation för detaljer.

Hugo Cachestrategier för Prestanda

Optimera utveckling och körning av Hugo-webbplatser

Sidinnehåll

Hugo cachestrategier är avgörande för att maximera prestandan för din statiska webbplatsgenerator. Medan Hugo genererar statiska filer som är inbyggt snabba, kan implementeringen av rätt cachning på flera nivåer dramatiskt förbättra byggtider, minska serverbelastningen och förbättra användarupplevelsen.

Oavsett om du använder en populär tema från vår guide De mest populära temana för Hugo eller ett anpassat tema, kommer dessa cachestrategier att hjälpa dig att optimera din webbplats prestanda.

Denna omfattande guide täcker byggtids-cachning, inkrementella byggnader, CDN-optimering, HTTP-headers och asset-cachestrategier för att hjälpa dig att uppnå optimal prestanda för din Hugo-baserade webbplats.

chef-in-a-white med Cachestrategier Det här trevliga bilden är genererad av AI-modellen Flux 1 dev.

Förstå Hugos Byggcache

Hugo upprätthåller en intern byggcache som lagrar bearbetat innehåll och tillgångar för att påskynda efterföljande byggnader. Den här cachen finns i katalogen resources/_gen och innehåller:

Renderade mallar: Förbehandlat mallutskrift
Bearbetade bilder: Omskalade, optimerade och konverterade bilder
Kompilerade tillgångar: Minimerad CSS och JavaScript
Resurstamdata: Filhashar och bearbetningsresultat

Hur Byggcache Fungerar

När du kör hugo, gör generatorn:

Kontrollerar cachen för befintliga bearbetade resurser
Jämför filändringsdatum och innehållshashar
Hoppar över bearbetning av oförändrade filer
Bygger endast modifierat eller nytt innehåll

Detta innebär att för en webbplats med 1000 inlägg, att redigera ett enda inlägg bara kräver att Hugo bearbetar det enskilda inlägget och återskapar påverkade sidor, inte hela webbplatsen.

Hantering av Byggcache

Du kan kontrollera Hugos cachebeteende med hjälp av olika kommandoradsflaggor. För en omfattande referens till Hugo-kommandon, se Hugo Cheat Sheet:

# Rensa cachen och bygga om allt
hugo --ignoreCache

# Använd en anpassad cachekatalog
export HUGO_CACHEDIR=/path/to/cache
hugo

# Inaktivera snabb renderingsläge (tvingar fullständig ombyggnad)
hugo server --disableFastRender

För CI/CD-rörledningar, överväg att spara cachekatalogen mellan byggnader för att påskynda distributioner. Om du använder Gitea Actions för distribution, se vår guide om Använda Gitea Actions för att distribuera Hugo-webbplats till AWS S3 för en komplett CI/CD-uppsättning:

# Exempel GitHub Actions arbetsflöde
- name: Cache Hugo resurser
  uses: actions/cache@v3
  with:
    path: resources/_gen
    key: ${{ runner.os }}-hugo-${{ hashFiles('**/content/**') }}

Konfiguration av Filcacher

Hugo erbjuder detaljerad kontroll över olika cachetyper genom avsnittet [caches] i konfigurationen. Enligt Hugo-dokumentationen, kan du konfigurera flera cachetyper:

[caches]
  [caches.assets]
    dir = ':resourceDir/_gen'
    maxAge = -1
  [caches.getcsv]
    dir = ':cacheDir/:project'
    maxAge = -1
  [caches.getjson]
    dir = ':cacheDir/:project'
    maxAge = -1
  [caches.getresource]
    dir = ':cacheDir/:project'
    maxAge = -1
  [caches.images]
    dir = ':resourceDir/_gen'
    maxAge = -1
  [caches.misc]
    dir = ':cacheDir/:project'
    maxAge = -1
  [caches.modules]
    dir = ':cacheDir/modules'
    maxAge = -1

Cachetyper Förklarade

assets: Cachar bearbetad CSS, JavaScript och andra tillgångar från Hugo Pipes
getcsv: Cachar parsade CSV-filer laddade via getCSV funktion
getjson: Cachar parsade JSON-filer laddade via getJSON funktion
getresource: Cachar fjärrresurser hämtade via getResource funktion
images: Cachar bearbetade bilder (omskalade, optimerade, konverterade)
misc: Allmänt cache för diverse operationer
modules: Cachar Hugo-moduler och deras beroenden

Konfigurationsalternativ

Varje cachestyp stöder två konfigureringsalternativ:

dir: Den absoluta filsystemspath där cachefiler lagras. Du kan använda token:
- :cacheDir - Ersätts med den konfigurerade cachekatalogen
- :resourceDir - Ersätts med resurskatalogen (vanligtvis resources/_gen)
- :project - Ersätts med basnamnet på katalogen för det aktuella Hugo-projektet
maxAge: Hur länge ett cacheobjekt är giltigt innan det rensas:
- 0 - Inaktiverar cachen
- -1 - Cacheobjektet går aldrig ut (standard)
- Positivt tal - Cacheobjektet går ut efter angiven tid (t.ex. 3600 för 1 timme)

Exempel på Anpassad Cachekonfiguration

Du kan anpassa cacheinställningar för specifika användningsområden:

[caches]
  # Håll bearbetade bilder i cache permanent
  [caches.images]
    dir = ':resourceDir/_gen/images'
    maxAge = -1

  # Cachea JSON API-svar i 1 timme
  [caches.getjson]
    dir = ':cacheDir/:project/json'
    maxAge = 3600

  # Cachea fjärrresurser i 24 timmar
  [caches.getresource]
    dir = ':cacheDir/:project/resources'
    maxAge = 86400

Den här konfigurationen låter dig:

Håll bearbetade bilder i cache permanent (eftersom de är deterministiska)
Uppdatera JSON-data varje timme (för dynamiskt innehåll)
Cachea fjärrresurser i 24 timmar (balans mellan färskhet och prestanda)

Token :project säkerställer att varje Hugo-projekt har isolerade cacher, så att hugo --gc (sopning) bara påverkar den aktuella projektets cache.

Inkrementella Byggnader

Hugos inkrementella byggsystem är en av dess mest kraftfulla funktioner. Det spårar ändringar på filnivå och bygger bara om vad som är nödvändigt.

Aktivering av Inkrementella Byggnader

Inkrementella byggnader är aktiverade som standard. Hugo automatiskt:

Spårar filberoenden
Bygger bara om ändrade sidor och deras beroenden
Upprätthåller beroendegrafer för effektiva uppdateringar

Byggprestanda Tips

Använd hugo server för utveckling: Utvecklingsservern använder inkrementella byggnader automatiskt
Använd --minify bara i produktion: Minimering lägger till overhead; använd den bara för slutliga byggnader
Optimera bildbehandling: Använd Hugos bildbehandlingsfunktioner effektivt:

[imaging]
  bgColor = '#ffffff'
  hint = 'photo'
  quality = 75
  resampleFilter = 'box'

Begränsa resursbehandling: Bearbeta bara bilder och tillgångar som faktiskt används

CDN Cachestrategier

Content Delivery Networks (CDN) är avgörande för global prestanda. När du distribuerar Hugo-webbplatser till CDN:er som CloudFront, Cloudflare eller Netlify, konfigurerar du cachningen lämpligt. För detaljerade instruktioner om att distribuera din Hugo-webbplats till AWS S3 med CloudFront, se vår guide om Distribuera Hugo-genererad webbplats till AWS S3.

CloudFront Konfiguration

För AWS CloudFront-distributioner, konfigurerar du cachebeteenden:

# config.toml
[[deployment.targets]]
name = "production"
URL = "s3://your-bucket?region=us-east-1"
cloudFrontDistributionID = "E1XIDGUJGD9BU9"

Skapa CloudFront cachebeteenden:

Statiska tillgångar (.css, .js, .jpg, .png, etc.):
- TTL: 1 år (31536000 sekunder)
- Cache Policy: CachingOptimized
- Komprimera: Ja
HTML-sidor (.html):
- TTL: 1 timme (3600 sekunder)
- Cache Policy: CachingDisabled (med ursprungsheaders)
- Komprimera: Ja

Cacheinvalidering

Automatisera cacheinvalidering vid distributioner:

# Invalidera CloudFront cache efter distribution
aws cloudfront create-invalidation \
  --distribution-id E1XIDGUJGD9BU9 \
  --paths "/*"

Eller använd Hugos distributionsfunktion:

[[deployment.targets]]
name = "production"
URL = "s3://your-bucket"
cloudFrontDistributionID = "E1XIDGUJGD9BU9"

Hugo kommer automatiskt att invalidera cachen vid distribution.

Tillgångsoptimering och Cachning

Hugo erbjuder inbyggd tillgångsbehandling som integreras med cachning.

Resurshashning

Hugo kan automatiskt lägga till innehållshashar i filnamn:

{{ $css := resources.Get "css/main.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">

Det här genererar filnamn som main.min.abc123def456.css, vilket möjliggör långsiktig cachning eftersom hashen ändras när innehållet ändras.

Bildbehandling och Cachning

Behandla bilder effektivt med Hugos inbyggda bildbehandling. Hugo cachar bearbetade bilder, så att omskalning av samma bild flera gånger bara bearbetar den en gång. För mer avancerad hantering av bilder, inklusive generering av OpenGraph-bildmetadata, se vår guide om OpenGraph bildmetadata i Hugo statisk webbplatsgenerator:

{{ $image := resources.Get "images/photo.jpg" }}
{{ $resized := $image.Resize "800x600" }}
<img src="{{ $resized.RelPermalink }}" alt="Foto">

Tillgångsbundling

Bundla och minimera tillgångar:

{{ $css := slice
    (resources.Get "css/reset.css")
    (resources.Get "css/main.css")
    (resources.Get "css/components.css")
  | resources.Concat "css/bundle.css"
  | minify
  | fingerprint
}}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">

Det här skapar en enda cachead, minimerad och fingerprinted CSS-fil.

Service Worker Cachning (Valfritt)

För avancerade cachestrategier, överväg att implementera service workers:

Grundläggande Service Worker

// sw.js
const CACHE_NAME = 'hugo-site-v1';
const urlsToCache = [
  '/',
  '/css/main.css',
  '/js/main.js',
  '/images/logo.png'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

Registrera Service Worker

<!-- I din Hugo-mall -->
<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}
</script>

Övervakning och Optimering

Byggtidsövervakning

Följ byggprestanda:

# Tidsmät dina byggnader
time hugo

# Använd detaljerad utdata för att se vad som bearbetas
hugo --verbose

Cacheträffsprocent

Övervaka CDN cacheträffsprocent genom ditt CDN:s analyspanel. Sträva efter:

Statiska tillgångar: >95% cacheträffsprocent
HTML-sidor: 60-80% cacheträffsprocent (beroende på uppdateringsfrekvens)

Prestandatestning

Använd verktyg som:

Lighthouse: Testa cachningseffektivitet
WebPageTest: Analysera cacheheaders
GTmetrix: Övervaka prestandamått

Bästa Praktiker Sammanfattning

Aktivera Hugos byggcache: Låt Hugo cachera bearbetade resurser
Använd inkrementella byggnader: Bygg endast det som har ändrats
Konfigurera CDN korrekt: Långa TTL-värden för tillgångar, kortare för HTML
Ange lämpliga HTTP-headers: Använd immutable för hashade tillgångar
Fingeravtryck tillgångar: Lägg till innehållshashar i filnamn
Invalidera cache vid distributioner: Se till att användare ser uppdateringar
Övervaka prestanda: Följ byggtider och cacheträffar
Optimera bilder: Använd Hugos bildbehandling effektivt
Bundla tillgångar: Minska HTTP-förfrågningar med bundlade CSS/JS
Överväg service workers: För offline-first eller avancerade cachningsbehov

Slutsats

Effektiva cachningsstrategier för Hugo-sidor involverar flera lager: byggtids-cachning för snabbare utveckling, CDN-cachning för global prestanda och korrekta HTTP-headers för webbläsarcachning. Genom att implementera dessa strategier kan du uppnå:

Snabbare byggnader: Inkrementella byggnader och byggcache minskar byggtider
Bättre prestanda: CDN och webbläsarcachning förbättrar laddningstider
Minskad serverbelastning: Statiska tillgångar cachade vid kanten
Förbättrad användarupplevelse: Snabbare sidladdningar och offline-funktioner

Kom ihåg att cachning är en balans mellan prestanda och aktualitet. Statiska tillgångar kan cachas aggressivt, medan HTML bör ha kortare cachningstider för att säkerställa att innehållsuppdateringar syns snabbt.