Duplikeret JavaScript
Silktide tjekker, om noget af den kode, din side downloader, er inkluderet mere end én gang. Duplikeret kode gør en side større og langsommere at indlæse uden at tilføre noget for den besøgende.
Moderne sammensættes normalt af mange små moduler, der bundtes sammen i nogle få store filer. Når flere bundles bygges uafhængigt af hinanden – for eksempel din egen kode plus en indlejret widget – kan hver af dem indeholde sin egen kopi af det samme modul, så besøgende ender med at downloade den samme funktionalitet to gange.
Hvorfor det er vigtigt
Hvert duplikeret modul koster downloadtid, behandlingstid og mobildata uden at give noget til gengæld. På en hurtig kontorforbindelse er spildet måske usynligt, men besøgende på telefoner og langsommere netværk mærker det direkte som en side, der tager længere tid om at blive vist og reagere.
Duplikering har også en tendens til at vokse ubemærket: Hvert nyt script eller widget, der føjes til et websted, kan medbringe sine egne kopier af almindelige biblioteker, så spildet hober sig op over tid, medmindre nogen leder efter det.
Sådan retter du det
Dette er en rettelse for dine udviklere i webstedets byggeproces snarere end i dets indhold:
- Analyser, hvordan webstedets JavaScript bundtes. De fleste bundlingsværktøjer har en analysetilstand, der visualiserer, hvad hver outputfil indeholder, hvilket gør duplikerede moduler nemme at få øje på.
- Konfigurer buildprocessen til at fjerne dubletter blandt delte afhængigheder, så et bibliotek, der bruges flere steder, inkluderes én gang og deles i stedet for at blive kopieret ind i hver bundle.
- Tilpas versionerne: To forskellige versioner af det samme bibliotek kan ikke flettes, så det er ofte den egentlige løsning at opgradere alt til én version.
- Hvis duplikeringen kommer fra et tredjepartsscript, som du ikke kan genbygge, så bed udbyderen om en slankere buildversion, eller erstat det.
Sådan tester Silktide dette
- Indlæs siden i en rigtig browser ved hjælp af den enhedstype, forbindelseshastighed og testplacering, der er konfigureret til dine hastighedstests.
- Undersøg de JavaScript-filer, som siden downloader, og identificer moduler, der forekommer i mere end én fil. Kopier matches ud fra, hvad de gør, så de findes, selv når filerne er formateret eller forskelligt.
- Rapportér hvert duplikeret modul, de filer det forekommer i, og den downloadstørrelse, der kan spares ved at fjerne de ekstra kopier.
- Vurder siden ud fra den samlede spildte downloadstørrelse: Selv omkring 10 KB duplikering giver en lavere vurdering, og 50 KB eller mere vurderes som dårligt.
Fejlfinding
De to filer indeholder ikke identisk kode
Tjekket matcher moduler ud fra, hvad de er, og ikke ud fra deres nøjagtige tekst. Det samme modul kan se meget forskelligt ud i to bundles efter minificering, men stadig være den samme duplikerede kode.
Duplikeringen findes i et tredjepartsscript
Du kan ikke genbygge andres bundle. Tag det op med udbyderen, indlæs deres script på en anden måde, der deler dine afhængigheder, eller accepter omkostningen, hvis scriptets værdi opvejer den.