Integrere Lighthouse i CI/CD
Automatiser Lighthouse-kontroller i pipelineene for kontinuerlig integrasjon og distribusjon for å oppdage ytelsesregresjoner tidlig.
Integrere Lighthouse i CI/CD er en gratis leksjon i Optimalisering av webytelse og Lighthouse på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Optimalisering av webytelse og Lighthouse, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.
Hva er CI/CD?
CI/CD står for Continuous Integration og Continuous Delivery/Deployment. Det er en moderne tilnærming til programvareutvikling som fokuserer på å automatisere ulike faser av programvarens livssyklus.
- Continuous Integration (CI): Utviklere slår ofte sammen kode i et sentralt repository. Automatiserte bygg og tester kjøres for å oppdage problemer tidlig.
- Continuous Delivery (CD): Etter CI klargjøres koden automatisk for utgivelse, slik at den alltid er klar til å distribueres.
- Continuous Deployment (CD): Tar CD ett skritt videre ved å distribuere hver endring automatisk til produksjon, så lenge alle tester består.
CI/CD hjelper team med å levere oppdateringer raskere og mer pålitelig.
Hvorfor CI/CD for ytelse?
Det er avgjørende å integrere ytelseskontroller i CI/CD-pipen for å opprettholde et raskt nettsted. Her er hvorfor:
- Oppdag forverringer tidlig: Oppdag automatisk ytelsesfall ved hver kodeendring, før de når brukerne.
- Konsekvent tilbakemelding: Få objektive ytelsespoengsummer ved hvert bygg, slik at teamene er klar over påvirkningen sin.
- Håndhev standarder: Bruk ytelsesbudsjetter til å la bygg mislykkes hvis måleverdiene faller under akseptable terskler.
- Spar tid: Automatiser manuelle revisjoner og frigjør utviklertid.
Møt Lighthouse CI (LHCI)
Selv om De kan kjøre Lighthouse manuelt, er Lighthouse CI (LHCI) et dedikert verktøy som er utviklet for å gjøre automatiserte ytelsesrevisjoner i CI/CD-piper enkle og effektive.
LHCI tilbyr et sett med verktøy for å:
- Samle inn Lighthouse-rapporter på tvers av ulike grener og commits.
- Kontrollere ytelsesbudsjetter mot disse rapportene.
- Vise historiske ytelsesdata.
- Integrere med ulike CI-leverandører som GitHub Actions, GitLab CI og Jenkins.
LHCI: Samle inn og kontroller
LHCI fungerer via et kommandolinjegrensesnitt (CLI). Vanligvis bruker du to hovedkommandoer:
lhci collect: Kjører Lighthouse-revisjoner på angitte URL-er og samler inn resultatene.lhci assert: Kontrollerer de innsamlede resultatene mot forhåndsdefinerte ytelsesbudsjetter og regler.
Først installerer du det vanligvis globalt eller som en utviklingsavhengighet:
npm install -g @lhci/cliKonfigurere LHCI
LHCI bruker en konfigurasjonsfil, ofte kalt lighthouserc.js eller lighthouserc.json, til å angi hvordan det skal kjøre. Denne filen ligger i roten av prosjektet.
Her er en grunnleggende struktur for lighthouserc.js som angir hvor revisjonene skal kjøres:
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000'],
startServerCommand: 'npm run start',
numberOfRuns: 3,
},
upload: {
target: 'temporary-public-storage',
},
},
};Håndheve ytelsesbudsjetter
En viktig funksjon i LHCI er håndheving av ytelsesbudsjetter. Dette er terskelverdier for måledata, for eksempel poengsum, total byte-størrelse eller Largest Contentful Paint, som nettstedet må oppfylle.
Du definerer budsjettene i assert-delen av lighthouserc.js. Hvis et budsjett brytes, kan LHCI mislykkes med CI-byggingen din.
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-plattform som er integrert direkte i GitHub-repositorier. Du kan enkelt legge til LHCI i GitHub Actions-arbeidsflyten din.
Du oppretter en YAML-fil (for eksempel .github/workflows/lighthouse.yml) som definerer trinnene for å kjøre LHCI når bestemte hendelser oppstår, for eksempel en pull request eller en push til hovedgrenen.
Dette gjør det mulig å utføre automatiserte kontroller før kode flettes inn.
Eksempel på GitHub Actions-arbeidsflyt
Her er en forenklet GitHub Actions-arbeidsflyt som setter opp Node.js, installerer LHCI, starter en server ved behov, samler inn revisjoner og kontrollerer resultatene mot budsjetter.
Denne arbeidsflyten kjører ved hver pull request til main-grenen.
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 assertSe gjennom CI/CD-resultater
Etter at LHCI har kjørt i CI/CD-pipelinen, viser det resultatene direkte i byggloggen. Hvis budsjetter er angitt, vil byggingen bestå eller mislykkes i henhold til disse.
- Bestått: Alle ytelsesbudsjetter og kontroller er oppfylt.
- Mislykket: Ett eller flere budsjetter er overskredet, noe som viser en ytelsesregresjon.
For mer detaljerte historiske data og trendanalyse kan du konfigurere LHCI til å laste opp rapporter til en LHCI-server, enten en server du drifter selv eller en skytjeneste.
Hurtigsjekk
Du har lært hvordan Lighthouse CI bidrar til å automatisere ytelseskontroller. Hvilke av alternativene nedenfor er viktige fordeler ved å integrere Lighthouse CI i CI/CD-pipelinen din?
Oppsummering og neste steg
Godt jobbet! I denne leksjonen utforsket vi hvordan Lighthouse kan integreres i CI/CD-pipelinen din.
- Vi forsto hvor viktig det er å automatisere ytelseskontroller for å forhindre regresjoner.
- Vi lærte om Lighthouse CI (LHCI) og rollen det spiller ved innsamling av revisjoner og kontroll mot budsjetter.
- Vi så eksempler på konfigurering av LHCI og integrering med GitHub Actions.
Ved å automatisere ytelsen sørger du for at webprosjektene dine forblir raske og brukervennlige over tid. Fortsett å utforske hvordan du kan finjustere CI/CD-oppsettet for best mulig resultat!
Lær deg Optimalisering av webytelse og Lighthouse med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Integrere Lighthouse i CI/CD» gratis?
Ja – hele teksten i «Integrere Lighthouse i CI/CD» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Optimalisering av webytelse og Lighthouse-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.
Hva lærer jeg i «Integrere Lighthouse i CI/CD»?
Automatiser Lighthouse-kontroller i pipelineene for kontinuerlig integrasjon og distribusjon for å oppdage ytelsesregresjoner tidlig. Du øver på Optimalisering av webytelse og Lighthouse med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Optimalisering av webytelse og Lighthouse?
Ingen tidligere erfaring er nødvendig. Optimalisering av webytelse og Lighthouse på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Integrere Lighthouse i CI/CD»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Optimalisering av webytelse og Lighthouse-leksjonen?
Ja. Alle Optimalisering av webytelse og Lighthouse-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Lighthouse via CLI og programkode
- Tilpassede revisjoner og påstander
- Integrere Lighthouse i CI/CD
- Ytelsesbudsjetter med Lighthouse