Zduplikowany JavaScript

Silktide sprawdza, czy jakikolwiek kod pobierany przez stronę nie jest dołączony więcej niż raz. Zduplikowany kod zwiększa rozmiar strony i spowalnia jej ładowanie, nie przynosząc odwiedzającym żadnych korzyści.

Współczesny jest zwykle składany z wielu małych modułów, które są łączone w kilka dużych plików. Gdy kilka paczek jest tworzonych niezależnie — na przykład własny kod i osadzony widżet — każda z nich może zawierać własną kopię tego samego modułu, przez co odwiedzający pobierają identyczną funkcjonalność dwukrotnie.

Dlaczego to ma znaczenie

Każdy zduplikowany moduł zwiększa czas pobierania i przetwarzania oraz zużycie danych mobilnych, nie oferując nic w zamian. W przypadku szybkiego połączenia biurowego to marnotrawstwo może być niewidoczne, ale odwiedzający korzystający z telefonów i wolniejszych sieci odczuwają je bezpośrednio, ponieważ strona pojawia się i reaguje wolniej.

Duplikacja ma też tendencję do niezauważalnego narastania: każdy nowy skrypt lub widżet dodany do witryny może zawierać własne kopie popularnych bibliotek, więc z czasem marnotrawstwo się kumuluje, chyba że ktoś go poszuka.

Jak to naprawić

To poprawka dla deweloperów, dotycząca procesu kompilowania witryny, a nie jej treści:

Przeanalizuj sposób tworzenia paczek JavaScript witryny. Większość narzędzi do tworzenia paczek ma tryb analizy, który wizualizuje zawartość każdego pliku wynikowego, ułatwiając wykrycie zduplikowanych modułów.
Skonfiguruj kompilację tak, aby usuwała duplikaty współdzielonych zależności. Dzięki temu biblioteka używana w kilku miejscach jest dołączana raz i współdzielona, zamiast być kopiowana do każdej paczki.
Ujednolić wersje: dwóch różnych wersji tej samej biblioteki nie można scalić, więc często właściwym rozwiązaniem jest zaktualizowanie wszystkiego do jednej wersji.
Jeśli duplikacja pochodzi ze skryptu innej firmy, którego nie możesz przebudować, poproś dostawcę o mniejszą wersję kompilacji albo zastąp ten skrypt.

Jak Silktide to testuje

Wczytuje stronę w rzeczywistej przeglądarce, korzystając z typu urządzenia, szybkości połączenia i lokalizacji testowej skonfigurowanych dla testów szybkości.
Analizuje pliki JavaScript pobierane przez stronę i identyfikuje moduły występujące w więcej niż jednym pliku. Kopie są dopasowywane na podstawie ich działania, więc są wykrywane nawet wtedy, gdy pliki są inaczej sformatowane lub .
Raportuje każdy zduplikowany moduł, pliki, w których występuje, oraz rozmiar pobierania, który można zmniejszyć przez usunięcie dodatkowych kopii.
Ocenia stronę na podstawie łącznego rozmiaru zmarnowanego pobierania: nawet około 10 KB duplikacji obniża ocenę, a 50 KB lub więcej otrzymuje słabą ocenę.

Rozwiązywanie problemów

Te dwa pliki nie zawierają identycznego kodu

Kontrola dopasowuje moduły na podstawie tego, czym są, a nie ich dokładnego tekstu. Ten sam moduł może wyglądać bardzo różnie w dwóch paczkach po minimalizacji, a mimo to nadal być tym samym zduplikowanym kodem.

Duplikacja znajduje się w skrypcie innej firmy

Nie możesz przebudować paczki należącej do kogoś innego. Zgłoś problem dostawcy, załaduj jego skrypt w inny sposób, który współdzieli Twoje zależności, albo zaakceptuj ten koszt, jeśli wartość skryptu go przewyższa.