Duplikat-JavaScript

Silktide kontrollerer om noe av koden siden laster ned, er inkludert mer enn én gang. Duplikatkode gjør siden større og tregere å laste inn uten å tilføre den besøkende noe.

Moderne settes vanligvis sammen av mange små moduler som samles i noen få store filer. Når flere pakker bygges uavhengig av hverandre – for eksempel din egen kode og en innebygd widget – kan hver av dem inneholde sin egen kopi av den samme modulen, slik at besøkende ender opp med å laste ned identisk funksjonalitet to ganger.

Hvorfor dette er viktig

Hver dupliserte modul koster nedlastingstid, behandlingstid og mobildata, uten å gi noe tilbake. På en rask kontorforbindelse er sløsingen kanskje ikke synlig, men besøkende på telefoner og tregere nettverk merker den direkte ved at det tar lengre tid før siden vises og reagerer.

Duplisering har også en tendens til å vokse ubemerket: hvert nye skript eller hver nye widget som legges til på et nettsted, kan ta med sine egne kopier av vanlige biblioteker. Dermed øker sløsingen over tid med mindre noen leter etter den.

Slik løser du det

Dette er en løsning for utviklerne dine, i nettstedets byggeprosess heller enn i innholdet:

Analyser hvordan nettstedets JavaScript pakkes. De fleste verktøy for pakking har en analysemodus som visualiserer hva hver utdatafil inneholder, noe som gjør dupliserte moduler enkle å oppdage.
Konfigurer byggeprosessen slik at delte avhengigheter dedupliseres, slik at et bibliotek som brukes flere steder, inkluderes én gang og deles, i stedet for å kopieres inn i hver pakke.
Samordne versjonene: To ulike versjoner av det samme biblioteket kan ikke slås sammen, så det å oppgradere alt til én versjon er ofte den egentlige løsningen.
Hvis dupliseringen kommer fra et tredjepartsskript du ikke kan bygge på nytt, kan du be leverandøren om en slankere utgave eller erstatte skriptet.

Slik tester Silktide dette

Last inn siden i en ekte nettleser ved å bruke enhetstypen, tilkoblingshastigheten og teststedet som er konfigurert for hastighetstestene dine.
Undersøk JavaScript-filene siden laster ned, og identifiser moduler som finnes i mer enn én fil. Kopier matches basert på hva de gjør, slik at de blir funnet selv når filene er formatert eller på ulike måter.
Rapporter hver dupliserte modul, filene den finnes i, og nedlastingsstørrelsen som kan spares ved å fjerne de ekstra kopiene.
Gi siden en vurdering basert på den totale bortkastede nedlastingsstørrelsen: selv rundt 10 KB med duplisering gir lavere vurdering, og 50 KB eller mer vurderes som dårlig.

Feilsøking

De to filene inneholder ikke identisk kode

Kontrollen matcher moduler basert på hva de er, ikke den nøyaktige teksten. Den samme modulen kan se svært forskjellig ut i to pakker etter minifisering, men likevel være den samme dupliserte koden.

Dupliseringen finnes i et tredjepartsskript

Du kan ikke bygge om andres pakke. Ta det opp med leverandøren, last inn skriptet på en annen måte som deler avhengighetene dine, eller aksepter kostnaden hvis verdien av skriptet veier opp for den.