Wszystko, co musisz wiedzieć o Kod JavaScript

Nowoczesne miejsca często łączą wszystkie javascript do jednego, dużego Main.js.js. scenariusz. To regularnie zawiera skrypty dla wszystkich stron lub tras, nawet jeśli użytkownicy potrzebują tylko niewielkiej części dla strony, którą oglądają.

Kiedy w ten sposób serwowane jest JavaScript, wydajność ładowania stron internetowych może cierpieć - zwłaszcza z Responsive Web Design. na urządzeniach mobilnych. Napraw to, wdrażając rozszczepianie kodu JavaScript.

• Jak kodować szybciej, lżejszy javascript

Jaki problem rozdziela kod?

Kiedy przeglądarka internetowa widzi & lt; script & gt; Musi spędzić czas do pobrania i przetwarzania, do którego odwołujesz JavaScript. Może to czuć się szybki na wysokich urządzeniach, ale ładowanie, analizowanie i wykonywanie niewykorzystanego kodu JavaScript może trwać na przeciętnych urządzeniach mobilnych z wolniejszą siecią i wolniejszym procesorem. Jeśli kiedykolwiek musieliście zalogować się do kawiarni lub Hotel WiFi, znasz wolne doświadczenia sieciowe mogą się zdarzyć wszystkim.

Każda sekunda spędziła czekając na JavaScript, aby zakończyć uruchomienie, może opóźnić, jak szybko użytkownicy mogą wchodzić w interakcje z doświadczeniem. Jest to szczególnie przypadek, jeśli UX opiera się na JS w przypadku krytycznych elementów, a nawet dopiero dołączyć obsługi zdarzeń do prostych elementów UI.

Czy muszę zawracać sobie głowę dzieleniem kodu?

Zdecydowanie warto zadać sobie pytanie, czy potrzebujesz kodu-podziału (jeśli użyłeś prostego Kreator strony internetowej prawdopodobnie nie). Jeśli Twoja witryna wymaga JavaScript dla treści interaktywnych (dla funkcji, takich jak szuflady menu i karuzele) lub jest aplikacją jednoczęciową opracowaniem na ramach JavaScript, aby renderować UI, odpowiedź jest prawdopodobna "tak". Niezależnie od tego, czy podziałek kodu jest wart swojej witryny to pytanie, które musisz odpowiedzieć na siebie. Rozumiesz swoją architekturę i jak najlepiej obciąża Twoją witrynę. Na szczęście dostępne są narzędzia, które pomogą Ci tutaj. Pamiętaj, że jeśli wdrażasz zmiany w całym systemie projektowym, zapisz te zmiany w Twojej udostępnianiu magazyn w chmurze więc twój zespół może zobaczyć.

Uzyskać pomoc

Dla tych nowych do rozszczepienia kodu JavaScript, Latarnia morska - Panel audytu w narzędziach deweloperskich Chrome - może pomóc w świetle, czy jest to problem dla Twojej witryny. Audyt, którego chcesz szukać, jest skrócenie czasu wykonania JavaScript (udokumentowane tutaj ). Ten audyt podkreśla wszystkie skrypty na swojej stronie, która może opóźnić interakcję z nim użytkownika.

Paptspeed Insights. to narzędzie online, które może również podkreślić wydajność witryny - i obejmuje dane laboratoryjne z Lighthouse i Real-World Data na temat wydajności witryny z raportu z doświadczenia użytkownika Chrome. Twój hosting Usługa może mieć inne opcje.

Zakres kodu w chromowanych narzędziach deweloperskich

Jeśli wygląda na to, że masz kosztowne skrypty, które mogą być lepiej podzielone, następne narzędzie do obejrzenia jest funkcją pokrycia kodu w narzędziach deweloperowych Chrome (DevTools & GT; górne menu i GT; Więcej narzędzi & GT; pokrycie). Środki, ile nieużywanego JavaScript (i CSS) znajduje się na twojej stronie. Dla każdego skryptu podsumowano, DevTools pokaże "niewykorzystane bajty". To jest kod, który możesz rozważyć podział i leniwy ładowanie, gdy użytkownik go potrzebuje.

Różne rodzaje podziałów kodu

Jest kilka różnych podejść, które możesz podjąć, jeśli chodzi o kodowanie kodu JavaScript. Ile stosuje się do Twojej witryny różnią się w zależności od tego, czy chcesz podzielić stronę / aplikację "Logic" lub rozdzielić biblioteki / ramy od innych "dostawców".

Rozszczepianie kodu dynamicznego: Wielu z nas "statycznie" importowanych modułów javascript i zależności, dzięki czemu są dołączone do jednego pliku w czasie budowy. "Dynamiczny" kod podziału dodaje możliwość definiowania punktów w JavaScript, który chcesz podzielić i być potrzebnym leniwym obciążeniem. Nowoczesny JavaScript używa dynamiki import() oświadczenie, aby to osiągnąć. Wkrótce pokryjemy to.

Rozdzielenie kodu dostawcy: Ramy i biblioteki, na których polegasz na (np. Reagują, kanciasty, Vue lub Lodash) są mało prawdopodobne, aby zmienić skrypty wysyłane do użytkowników, często jako "Logika" dla Twojej witryny. Aby zmniejszyć negatywny wpływ unieważnienia pamięci podręcznej dla użytkowników powracających do Twojej witryny, możesz podzielić "dostawców" w oddzielny skrypt.

Rozszczepianie kodu punktu wstępnego: Wpisy rozpoczął punkty w swojej witrynie lub aplikacji, że narzędzie takie jak webpack może przyjrzeć się zbudować drzewo zależności. Dzielenie przez wpisy są przydatne dla stron, w których routing po stronie klienta nie jest używany lub polegasz na kombinacji serwera i renderowania po stronie klienta.

Dla naszych celów w tym artykule skoncentrujemy się na dynamicznym kodowaniu kodu.

Uzyskaj ręce z podziałem kodu

Zoptymalizujmy wydajność javascript Prosta aplikacja, która sortuje trzy liczby Dzięki podziału kodu - jest to aplikacja przez mojego kolegi Houssein Djirdeh. Przepływ pracy, użyjemy, aby szybko zmierzyć nasz ładunek JavaScript, optymalizować i monitorować. Zacznij tutaj .

Mierzyć wydajność

Przed próbą dodawania wszelkich optymalizacji najpierw będziemy mierzyć wydajność naszego JavaScript. Ponieważ aplikacja Magic Sorter jest hostowana na temat usterki, będziemy korzystać z jego środowiska kodującego. Oto jak o to pójść:

• Kliknij przycisk Pokaż na żywo.
• Otwórz DevTools, naciskając opcję CMD + I / Ctrl + Shift + i.
• Wybierz panel sieciowy.
• Upewnij się, że sprawdzono pamięć podręczną i ponownie załaduj aplikację.

Ta prosta aplikacja wydaje się używać 71,2 KB JavaScript, aby sortować przez kilka liczb. To z pewnością nie wydaje się słuszne. W naszym źródle. src / index.js. , biblioteka narzędzia Lodash jest importowana i używamy Sortuj według - Jedna z jego sortowania narzędzi - aby posortować nasze numery. Lodash oferuje kilka przydatnych funkcji, ale aplikacja wykorzystuje tylko jedną metodę. Powszechnym błędem jest zainstalowanie i import całej zależności trzecich, gdy w rzeczywistości musisz jedynie użyć małej części.

Zoptymalizuj wiązkę

Istnieje kilka opcji dostępnych do przycinania naszego rozmiaru pakietu JavaScript:

1. Napisz niestandardową metodę sortowania zamiast polegania na bibliotece trzeciej.
2. Posługiwać się Array.prototype.sort () , który jest wbudowany w przeglądarkę.
3. Importuj tylko Sortuj według Metoda z Lodash zamiast całej biblioteki.
4. Pobierz tylko kod do sortowania, gdy użytkownik go wymaga (po kliknięciu przycisku).

Opcje 1 i 2 są odpowiednie do zmniejszenia naszego rozmiaru wiązki - prawdopodobnie mają sens dla prawdziwej aplikacji. Do celów dydaktycznych spróbujemy czegoś innego. Opcje 3 i 4 pomagają poprawić wydajność aplikacji.

Importuj tylko potrzebny kod

Modyfikujemy kilka plików do importowania tylko jednego Sortuj według Metoda potrzebujemy z Lodash. Zacznijmy od zastępowania naszego Lodasz zależność od pakiet.json. :

"lodash": "^4.7.0",

z tym:

"lodash.sortby": "^4.7.0",

W SRC / index.js importujemy tego bardziej konkretnego modułu:

 JS
Importuj "./style.css";
Importuj _ z "Lodash";
Importuj Sortby z "Lodash.sortby"; 

Następnie zaktualizujemy sposób sortowania wartości:

 JS
formularz.addeventlistener ("Prześlij", e = & gt; {
  e.preventdefault ();
  CAW wartości = [wejście1.ValueasNumber, wejście2.ValUeasNumber, wejście3.valueasNumber];
  CEST SortedValues ​​= _.Sortby (wartości);
  CEST SortedValues ​​= Sortby (wartości);
  wyniki.innerhtml = `.
    & lt; H2 & GT;
      $ {sortedvalues}
    & lt; / h2 & gt;
  `
}); 

Przeładuj aplikację Magic Numbers, otwórz narzędzia programistyczne i ponownie spójrz na panel sieciowy. W tej konkretnej aplikacji nasz wiązka została zmniejszona przez skalę czterech z małą pracą. Ale nadal jest dużo miejsca na poprawę.

Rozłamanie kodu JavaScript.

WebPack jest jednym z najpopularniejszych bundlerów modułów JavaScript używanych dziś przez programistów internetowych. To "Wiązki" (łączy) Wszystkie moduły JavaScript i inne aktywa w przeglądarki internetowe Pliki statyczne mogą przeczytać.

Pojedynczy pakiet w tej aplikacji można podzielić na dwa oddzielne skrypty:

• Jeden jest odpowiedzialny za kod wstępny początkową trasę.
• Inny zawiera nasz kod sortowania.

Przy użyciu importu dynamicznego (z import() Słowo kluczowe), drugi skrypt może być leniwy na żądanie. W naszej aplikacji Magic Numbers, kod tworzący skrypt może być załadowany w razie potrzeby, gdy użytkownik kliknie przycisk. Zaczynamy od usunięcia importu najwyższego poziomu dla metody sortowania src / index.js. :

 Importuj Sortby z "Lodash.sortby"; 

Zaimportuj go w słuchaczu zdarzeń, który pożary po kliknięciu przycisku:

formularz.addeventlistener ("Prześlij", e = & gt; {
  e.preventdefault ();
  Import ("Lodash.sortby")
    .The (moduł = & gt; module.default)
    .The (sortowanie ())
    .Catch (Err = & GT; {alert (ERR)});
});

Ta dynamiczna import() Funkcja Używamy, jest częścią propozycji standardów standardów dla włączenia do dynamicznego importowania modułu w standardowym poziomie języka JavaScript. Webpack już obsługuje tę składnię. Możesz przeczytać więcej o tym, jak dynamiczny import działa w tym artykule .

The. import() Oświadczenie zwraca obietnicę, gdy rozwiązuje. WebPack uważa to za punkt podziału, że wyrwuje się w oddzielny skrypt (lub fragment). Gdy moduł zostanie zwrócony, moduł.default. służy do odniesienia do domyślnego eksportu dostarczonego przez Lodasz . Obietnica jest przykuta z innym .następnie() dzwonienie do A. sortowanie metoda sortowania trzech wartości wejściowych. Pod koniec łańcucha obietnicy, .złapać() jest wezwany do obsługi, gdzie obietnica zostanie odrzucona w wyniku błędu.

W prawdziwych zastosowaniach produkcyjnych należy odpowiednio obsługiwać dynamiczne błędy importu. Proste wiadomości alarmowe (podobne do tego, co tu są używane), są używane i nie mogą zapewnić najlepszego doświadczenia użytkownika do pozwalania użytkownikom wiedzieć, że coś poszło nie tak.

W przypadku, gdy widzisz błąd pilotowy, taki jak "Błąd analizowania: Import i Eksport może pojawić się tylko na najwyższym poziomie", wiem, że wynika to z dynamicznej składni importowej jeszcze nie sfinalizowanej. Chociaż webpack obsługuje go, ustawienia EsLint (narzędzie do Lintingu JavaScript) używane przez usterkę nie zostały zaktualizowane, aby podać tę składnię jeszcze, ale nadal działa.

Ostatnią rzeczą, którą musimy zrobić, to napisać sortowanie metoda na końcu naszego pliku. Musi to być funkcja zwracająca funkcję, która zajmuje importowaną metodę Lodash.sortby. . Zakładowa funkcja może sortować trzy wartości wejściowe i zaktualizuj dom:

 Const Sortenput = () = & GT; {
  powrót (sortiby) = & gt; {
    CING wartości = [
      wejście1.ValueasNumber,
      wejście2.valueasNumber,
      wejście3.valueasNumber.
    ];
    CEST SortedValues ​​= Sortby (wartości);
    wyniki.innerhtml = `.
      & lt; H2 & GT;
        $ {sortedvalues}
      & lt; / h2 & gt;
    `
  };
} 

Monitoruj liczby

Teraz ponownie załaduj aplikację po raz ostatni i zachowaj oko na panelu sieciowym. Powinieneś zauważyć, jak tylko mały pakiet początkowy jest pobierany, gdy ładunki aplikacji. Po kliknięciu przycisku, aby sortować numery wejściowe, skrypt / fragment zawierający kod sortowania zostaje pobrany i wykonany. Czy widzisz, jak nadal są posortowane, jak się spodziewaliście?

Ładowanie kodu JavaScript i Lazy-Loading może być bardzo przydatne do przycinania początkowego rozmiaru wiązki aplikacji lub witryny. Może to bezpośrednio spowodować szybsze czasy ładowania stron dla użytkowników. Chociaż spojrzaliśmy na dodawanie kodu podziału do aplikacji JavaScript waniliowej, możesz również zastosować go do aplikacji zbudowanych z bibliotekami lub ramami.

Lazy-Loading z biblioteką JavaScript lub Ramy

Wiele popularnych firm wspiera dodanie podziału kodu i leniwych ładunków przy użyciu dynamicznego importu i webpack.

Oto, jak możesz leniwy załadować film "Opis", używając reagowania (z Reagować.Lazy () i ich funkcja napięcia), aby zapewnić "załadunek ..." Fallback, gdy komponent jest leniwy załadowany (patrz tutaj Aby uzyskać więcej szczegółów):

 Importuj reagować, {zawieszenie} od "reagowania";
Const Opis = React.Lazy (() = & GT; Importuj ("./ Opis"));
Aplikacja funkcyjna () {
  powrót (
    & lt; div & gt;
      & lt; H1 & GT; mój film 

Rozdzielenie kodu może pomóc zmniejszyć wpływ JavaScript na doświadczeniu użytkownika. Zdecydowanie uważasz go, jeśli masz większe wiązki javascript iw wątpliwości nie zapomnij mierzyć, optymalizacji i monitorowania.

Ten artykuł został pierwotnie opublikowany w wydaniu 317 z netto , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Kup problem 317 tutaj lub Subskrybuj tutaj .

Powiązane artykuły:

• 9 najlepszych ram JavaScript
• 15 Niezbędne narzędzia JavaScript, które powinieneś użyć
• 14 najlepszych apisów JavaScript