Jak dynamicznie importować JavaScript z mapami importowymi
Dynamiczny import na stronach internetowych odbywa się za pomocą funkcji o nazwie Mapy importu. Dowiesz się o obciążeniu dynamicznym, domyślnym zachowaniu narzędzi kompilacji i użyciu map importu z przykładem krok po kroku. Zacznijmy.
Domyślne zachowanie narzędzi kompilacji
Domyślnie, kiedy uruchamiasz stronę internetową HTML i wszystkie skrypty, które są w niej uwzględnione, są kompilowane w jednym dużym pliku. Wszystkie biblioteki zewnętrzne i wewnętrzne są natychmiast ładowane do pamięci (serwer), a do projektu dodaje się wiele złożoności z powodu załadowania różnych fragmentów kodu zewnętrznego jednocześnie.
Wcześniej aplikacje JavaScript były bardzo proste i podstawowe, ale w miarę upływu czasu aplikacje stają się coraz trudniejsze i złożone, i właśnie dlatego ładowanie wszystkich bibliotek zewnętrznych jednocześnie jeszcze zanim będą potrzebne, nie jest wydajnym rozwiązaniem rozwiązania. W tym miejscu przydaje się dynamiczne ładowanie i modułowość skryptów.
Ładowanie dynamiczne
Jak sama nazwa wskazuje, jest to proces ładowania bibliotek zewnętrznych i skryptów tylko wtedy, gdy są potrzebne, to jest w czasie wykonywania. Jeśli chodzi o skrypt aplikacji internetowej, dynamiczne ładowanie skryptów odbywa się przez funkcję w ES6 CADE moduły w których skrypty są podzielone na mniejsze komponenty. Podobnie importowanie odbywa się również w czasie wykonywania za pomocą map importu.
Aby załadować import w czasie wykonywania, używamy funkcji o nazwie Mapy importu, Ta funkcja pozwala nam zastąpić domyślną procedurę narzędzi kompilacji i leniwe obciążenie Nasz import/biblioteki; leniwe ładowanie oznacza ładowanie tylko wtedy, gdy jest to wymagane.
Aby zademonstrować dynamiczne importowanie zewnętrznych skryptów na stronie internetowej, skonfigurujesz stronę internetową, która wykonuje proste zadanie, później zaimportujemy zewnętrzną bibliotekę/pakiet Lodash i użyjemy jej funkcji, aby wykonać to samo zadanie
Notatka: Potrzebujesz edytora kodu (najlepiej vs kod) dla tego i nodejs,
Krok 1: Konfigurowanie HTML i pliku skryptu
Aby zademonstrować użycie map importu do ładowania dynamicznego, będziemy wymagać zainstalowania NodeJS w naszym systemie, kliknij tutaj, aby odczytać instalację NodeJS.
Utwórz folder na komputerze i otwórz ten folder za pomocą kodu VS (lub żądanego edytora kodu), jak pokazano poniżej:
Wewnątrz folderu utwórz plik HTML o nazwie dom.html i plik skryptu jako scenariusz.JS:
Wyświetlimy kilka słów za pomocą pliku skryptu. Tak więc w pliku HTML dodaj następujący znacznik skryptu.
Notatka: Używamy Typ właściwość i ustawienie go równego moduł Aby powiadomić przeglądarkę, że jest to skrypt modułowy.
Teraz, wewnątrz pliku skryptu, wpisz następujące wiersze kodu, aby wydrukować tekst na stronie internetowej HTML.
const el = dokument.createElement („p”);const słowa = "Linux, wskazówka, samouczek!";
const Text = Dokument.CreateTextNode (słowa);
El.appendChild (tekst);
dokument.ciało.appendchild (el);
Aby uruchomić plik, otwórz terminal kodu i typu VS ”NPX Serve”, Jeśli po raz pierwszy wypróbował polecenie NPX Serve, może zainstalować„podawać”Pakiet i poproś o afirmację, a następnie rozpocznie instalację:
Następnie polecenie NPX Servel pokaże nam, gdzie jest hosting naszej strony HTML, więc kliknij link w następujący sposób:
Po otwarciu linku http: // localhost: 3000 zobaczysz następujące dane wyjściowe:
Krok 2: Importowanie biblioteki zewnętrznej
Zamierzamy importować Startcase Metoda z Lodash Biblioteka i użyj tej metody StartCase, aby przekonwertować nasze ciągi, aby „uruchomić przypadek” za pomocą następującego kodu:
Importuj początek od „@lodash/startcase”;Notatka: Rozpocznij typ sprawy oznacza, że każde słowo będzie miało pierwszą literę w sprawie kapitałowej.
Zmodyfikujesz plik skryptu jako:
Importuj początek od „@lodash/startcase”;const el = dokument.createElement („p”);
const todisplay = "Linux, wskazówka, samouczek!";
const Text = Dokument.CreateTextNode (startCase (TodisPlay));
El.appendChild (tekst);
dokument.ciało.appendchild (el);
Jak widać, kod jest trochę inny, przekazujemy Do wyświetlenia zmienne do Startcase funkcjonować.
Odśwież stronę, a zobaczysz następujący błąd na konsoli programisty:
Jest tak, ponieważ przeglądarka nie wie, co zrobić z tym instrukcją importu na początku skryptu
plik. Przeglądarka próbuje znaleźć Lodash Pakiet na lokalnym serwerze WWW, jest to również domyślne zachowanie narzędzia kompilacji. Aby to zmienić, używamy map importu w plikach HTML.
Krok 3: Korzystanie z map importu
Mapa importu, to funkcja ES6, zawiera parę wartości kluczowej, przy czym klucz jest nazwą importu, a wartością jest lokalizacja importu.
Składnia Mapa importu jest:
W naszym przypadku dodajemy następujący znacznik skryptu, w tym mapa importu:
Notatka: Tag skryptu zawierający mapę importu należy dodać przed tagiem skryptu zawierającym typ modułowy.
Po dodaniu tych linii odśwież stronę internetową i powinieneś zobaczyć wyjście:
Jak widać, Startcase Metoda z powodzeniem przekonwertowała nasze słowa String w typ „Uruchom sprawę”. Teraz włączasz biblioteki zewnętrzne dynamicznie i możemy zbadać leniwe ładowanie w narzędzi programistycznych przeglądarki.
Krok 4: Zbadaj leniwe ładowanie
Otwórz konsolę programistów przeglądarki i przejdź do karty sieciowej.
Pod wodospadem możesz zobaczyć, który skrypt ładuje się o której godzinie:
I stąd wyraźnie widać, że wszystkie skrypty nie zostały załadowane na początku, zostały załadowane leniwie w czasie wykonywania.
Wniosek
W JavaScript dynamiczne importowanie odbywa się przez funkcję o nazwie Mapy importu. Dynamiczny import oznacza zastąpienie domyślnego zachowania narzędzi kompilacji i importu bibliotek zewnętrznych, gdy są one potrzebne w czasie wykonywania, ponieważ czasami potrzebujesz biblioteki tylko w jednej części aplikacji internetowej, a nie innych. Domyślne narzędzia kompilacji załadują wszystkie biblioteki w jednym dużym pliku, który spowoduje wzrost zużycia pamięci. Nauczyłeś się, jak korzystać z map importu do leniwych bibliotek zewnętrznych za pomocą przykładu i zbadałeś je w konsoli dewelopera.