25.07.20223 min

Bartosz GołębiowskiFrontend DeveloperTransition Technologies PSC S.A.

Czym są import mapy i do czego służą?

Zapoznaj się z motywem import mapy, który ułatwi zarządzanie wersjami zależności oraz umożliwi optymalizację pod kątem wielkości plików JavaScript.

Czym są import mapy i do czego służą?

Import mapa to specyfikacja, która umożliwia przeglądarce zastąpienie specyfikatora importu oraz argumentu przekazanego do dynamicznego importu na zdefiniowany wewnątrz import mapy URL.


Zastosowania

Prosta kontrola nad wersjami

Dzięki takiemu podejściu mamy możliwość sterowania wersjami z jednego centralnego miejsca w naszej aplikacji. Możemy aktualizować wersję zależności, jak również poszczególnych modułów/mikro frontendów. Jeżeli, definiując import mapę w pliku HTML, skorzystamy z opcji wstrzyknięcia adresu, z którego zostanie ona zaciągnięta, uzyskujemy możliwość zmiany wersji oprogramowania bez konieczności aktualizacji i ponownego wdrożenia pliku HTML.

Należy tutaj pamiętać o mechanizmach cachowania, im mniejsza wartość TTL, tym szybciej zmiany będą dostępne na środowisku. Nie należy rezygnować z mechanizmów cachujących, ale dobrać optymalną wartość, aby użytkownicy nie musieli za każdym razem wykonywać żądania do serwera origin, lecz pobierali go z edge lokalizacji.

Na naszym projekcie w firmie Transition Technologies czas potrzebny, aby zaktualizować środowisko z nową wersją mikro frotendu lub współdzielonej zależności to maksymalnie 3 minuty. W razie regresji jesteśmy w stanie powrócić do działającej wersji również w 3 minuty.


Przykład zastosowania import mapy za pomocą linku


Optymalizacje pod kątem rozmiarów artefaktów

Gdy pod zadanym adresem jednocześnie jest wyświetlane więcej niż jeden mikro frontend, może dojść do sytuacji, że pewne zależności mogą zostać zaciągnięte do przeglądarki więcej niż jeden raz. Z jeden strony jest to dobra praktyka, która ogranicza zależności między modułami, z drugiej strony jest to miejsce, w którym można wykorzystać motyw import mapy, aby nasza aplikacja współdzieliła niektóre zależności i w krótszym czasie pobrała niezbędne pliki potrzebne do prawidłowej pracy. Import mapa zadba o to, aby pobrać dokładnie jeden raz zależność i będzie współdzielić ją między wszystkimi modułami.

Żeby tego dokonać, należy poinformować nasze narzędzie do budowy artefaktów, aby pewne zależności traktowały jako zewnętrzne. Webpack wspiera to dzięki słowu klucz externals w pliku konfiguracyjnym. Vite również wspiera zewnętrzne zależności. Należy ustawić odpowiednie wartości, w konfiguracji rollup.

Załóżmy, że mikro frontendy wykorzystują zależność React i zajmuję ona 25% całego rozmiaru pojedynczego projektu. Gdy skorzystamy ze współdzielenia zależności, to uzyskujemy oszczędność 13% w rozmiarze w porównaniu do zaciągnięcia zależności dwa razy.


Grafika pochodzi z książki Micro Frontends in Action, Michael Geers


Ograniczenia


Brak wsparcia przez wszystkie przeglądarki

Na chwilę obecną ponad 72% użytkowników jest w stanie korzystać z natywnej import mapy w swojej przeglądarce według portalu caniuse.com. Jest to zdecydowania zbyt niska wartość dla produkcyjnych rozwiązań. W takim przypadku wymagany jest polyfill. Wymaga on jednak dodatkowych skryptów, które należy umieścić w pliku HTML, których łączny rozmiar to 7.8 kB. Dodatkowo należy dokonać modyfikacji konfiguracji narzędzi do budowy plików wynikowych, aby pliki wynikowe naszych modułów były w formacie SystemJS, oraz URL w import mapie muszą wskazywać na pliki w formacie np. UMD.


Przykład zastosowania import mapy z wykorzystaniem SystemJS


Podsumowanie

Motyw import mapy w upraszcza globalne zarządzanie wersjami zależności, jak również umożliwia wykorzystywanie więcej niż jednej wersji zależności, gdy dany moduł/mikro frontend jeszcze nie wykonał migracji do nowszej wersji. Można tego dokonać za pomocą słowa klucz scopes.

Aktualizowanie wersji poszczególnych mikro frontendów może odbywać się bez chwilowych braków dostępów dla użytkowników, a sama aktualizacja może zostać zautomatyzowana dzięki rozwiązaniom open source.

Dzięki polyfillowi jesteśmy w stanie korzystać z import mapy nawet w przeglądarce Internet Explorer.

<p>Loading...</p>