Optimering af webydeevne og Lighthouse · Lektion

Integration af Lighthouse i CI/CD

Automatisér Lighthouse-kontroller i jeres pipelines til continuous integration og deployment, så performanceforringelser opdages tidligt.

Lektion 3 af 411 trin

Integration af Lighthouse i CI/CD er en gratis Optimering af webydeevne og Lighthouse-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Optimering af webydeevne og Lighthouse, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Optimering af webydeevne og Lighthouse-kurset indeholder 4 lektioner i alt.

Hvad er CI/CD?

CI/CD står for Continuous Integration og Continuous Delivery/Deployment. Det er en moderne tilgang til softwareudvikling, der fokuserer på at automatisere forskellige faser af softwarens livscyklus.

Continuous Integration (CI): Udviklere sammenfletter ofte kode i et centralt repository. Automatiske builds og tests køres for at opdage problemer tidligt.
Continuous Delivery (CD): Efter CI gøres koden automatisk klar til udgivelse, så den altid er i en tilstand, hvor den kan deployes.
Continuous Deployment (CD): Går et skridt videre ved automatisk at deploye enhver ændring til produktion, hvis alle tests består.

CI/CD hjælper teams med at levere opdateringer hurtigere og mere pålideligt.

Hvorfor CI/CD til ydeevne?

Det er afgørende at integrere ydeevnekontroller i dit CI/CD-procesforløb for at bevare et hurtigt websted. Her er hvorfor:

Opdag forringelser tidligt: Registrér automatisk fald i ydeevnen ved hver kodeændring, før de når ud til brugerne.
Ensartet feedback: Få objektive ydeevnescorer ved hver build, så teams hele tiden er opmærksomme på deres påvirkning.
Håndhæv standarder: Brug ydeevnebudgetter til at få builds til at fejle, hvis målingerne falder under acceptable grænser.
Spar tid: Automatisér manuelle analyser, så udviklerne får mere tid.

Mød Lighthouse CI (LHCI)

Selvom du kan køre Lighthouse manuelt, er Lighthouse CI (LHCI) et dedikeret værktøj, der er udviklet til at gøre automatiseret ydeevneanalyse i CI/CD-procesforløb enkel og effektiv.

LHCI tilbyder en række værktøjer til at:

Indsamle Lighthouse-rapporter på tværs af forskellige branches og commits.
Kontrollere ydeevnebudgetter i forhold til disse rapporter.
Vise historiske ydeevnedata.
Integrere med forskellige CI-udbydere som GitHub Actions, GitLab CI og Jenkins.

LHCI: Indsaml og kontrollér

LHCI fungerer via en kommandolinjegrænseflade (CLI). Du bruger typisk to hovedkommandoer:

lhci collect: Kører Lighthouse-revisioner på angivne URL'er og indsamler resultaterne.
lhci assert: Kontrollerer de indsamlede resultater i forhold til foruddefinerede ydelsesbudgetter og regler.

Først installerer du det normalt globalt eller som en udviklingsafhængighed:

npm install -g @lhci/cli

Konfiguration af LHCI

LHCI bruger en konfigurationsfil, der ofte hedder lighthouserc.js eller lighthouserc.json, til at definere, hvordan det skal køre. Denne fil ligger i roden af dit projekt.

Her er en grundlæggende struktur for lighthouserc.js, der angiver, hvor revisionerne skal køres:

module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm run start',
      numberOfRuns: 3,
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

Håndhævelse af ydelsesbudgetter

En vigtig funktion i LHCI er håndhævelse af ydelsesbudgetter. Det er grænseværdier for målinger som score, samlet bytevægt eller Largest Contentful Paint, som dit websted skal overholde.

Du definerer budgetterne i sektionen assert i lighthouserc.js. Hvis et budget overskrides, kan LHCI få din CI-build til at mislykkes.

module.exports = {
  ci: {
    collect: { /* ... */ },
    assert: {
      assertions: {
        'performance-score': ['error', { minScore: 0.90 }],
        'first-contentful-paint': ['error', { maxNumericValue: 1500 }],
        'total-byte-weight': ['warn', { maxNumericValue: 1000000 }], // 1MB
      },
    },
    upload: { /* ... */ },
  },
};

LHCI med GitHub Actions

GitHub Actions er en populær CI/CD-platform, der er integreret direkte i GitHub-lagre. Du kan nemt føje LHCI til dit GitHub Actions-arbejdsforløb.

Du opretter en YAML-fil (f.eks. .github/workflows/lighthouse.yml), som definerer trinnene til at køre LHCI, når bestemte hændelser indtræffer, f.eks. en pull request eller en push til hovedgrenen.

Det gør det muligt at udføre automatiske kontroller, før koden flettes.

Eksempel på et GitHub Actions-arbejdsforløb

Her er et forenklet GitHub Actions-arbejdsforløb, der konfigurerer Node.js, installerer LHCI, starter en server (hvis det er nødvendigt), indsamler revisioner og kontrollerer resultaterne i forhold til budgetterne.

Dette arbejdsforløb kører ved hver pull request til grenen main.

name: Lighthouse CI
on: [pull_request]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: npm install -g @lhci/cli && lhci collect && lhci assert

Gennemgang af CI/CD-resultater

Når LHCI kører i dit CI/CD-arbejdsforløb, viser det output direkte i buildloggen. Hvis der er angivet budgetter, består eller mislykkes builden efter, om de overholdes.

Bestået: Alle ydelsesbudgetter og kontroller blev overholdt.
Mislykket: Et eller flere budgetter blev overskredet, hvilket indikerer en forringelse af ydelsen.

Hvis du vil have mere detaljerede historiske data og analysere tendenser, kan du konfigurere LHCI til at uploade rapporter til en LHCI-server (enten en selvhostet server eller en skytjeneste).

Hurtig kontrol

Du har lært, hvordan Lighthouse CI hjælper med at automatisere ydelseskontroller. Hvilke af følgende er vigtige fordele ved at integrere Lighthouse CI i dit CI/CD-arbejdsforløb?

Besvar den i den interaktive lektion

Opsummering og næste trin

Godt arbejde! I denne lektion undersøgte vi, hvordan Lighthouse integreres i dit CI/CD-arbejdsforløb.

Vi forstod betydningen af at automatisere ydelseskontroller for at forhindre forringelser.
Vi lærte om Lighthouse CI (LHCI) og dets rolle i indsamling af revisioner og kontrol af budgetter.
Vi så eksempler på konfiguration af LHCI og integration med GitHub Actions.

Ved at automatisere ydelsen sikrer du, at dine webprojekter forbliver hurtige og brugervenlige over tid. Bliv ved med at undersøge, hvordan du finjusterer din CI/CD-konfiguration for at opnå de bedste resultater!

Gratis at komme i gang

Lær Optimering af webydeevne og Lighthouse med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Integration af Lighthouse i CI/CD” gratis?

Ja — hele teksten til “Integration af Lighthouse i CI/CD” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Optimering af webydeevne og Lighthouse-kurset, skal du opgradere til CoddyKit PRO. Optimering af webydeevne og Lighthouse-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Integration af Lighthouse i CI/CD”?

Automatisér Lighthouse-kontroller i jeres pipelines til continuous integration og deployment, så performanceforringelser opdages tidligt. Du øver dig i Optimering af webydeevne og Lighthouse med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Optimering af webydeevne og Lighthouse?

Der kræves ingen tidligere erfaring. Optimering af webydeevne og Lighthouse på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Integration af Lighthouse i CI/CD”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Optimering af webydeevne og Lighthouse-lektion?

Ja. Alle Optimering af webydeevne og Lighthouse-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Optimering af webydeevne og Lighthouse