Niedawno pracuję nad niektórymi pracami związanymi z optymalizacją witryny i zacząłem używać podziału kodu w pakiecie internetowym, używając instrukcji importu w następujący sposób:
import(/* webpackChunkName: 'pageB-chunk' */ './pageB')
Który prawidłowo stworzyć stronaB-chunk.js , teraz powiedzmy chcę wstępne pobieranie ten kawałek w Strona A, mogę to zrobić przez dodanie tego oświadczenia w Strona A:
import(/* webpackChunkName: 'pageB-chunk' */ /* webpackPrefetch: true */ './pageB')
Co spowoduje, że
<link rel="prefetch" href="pageB-chunk.js">
dołączając do nagłówka HTML, przeglądarka go pobierze, jak dotąd tak dobrze.
Problem polega na tym , że używam tutaj instrukcji importu , nie tylko pobierając plik js, ale także oceniam plik js, co oznacza, że kod tego pliku js jest analizowany i kompilowany do kodów bajtowych, wykonywany jest kod najwyższego poziomu tego JS.
Jest to bardzo czasochłonna operacja na urządzeniu mobilnym i chcę ją zoptymalizować, chcę tylko część pobierania wstępnego , nie chcę części oceniania i wykonywania , ponieważ później, gdy wystąpią pewne interakcje użytkownika, uruchomię analizę składniową i oceniam siebie
↑ ↑↑↑↑↑↑ Tylko chcę uruchomić dwa pierwsze kroki, zdjęcia pochodzą z https://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/ ↑↑ ↑↑
Jasne, że mogę to zrobić, dodając link pobierania wstępnego osobiście, ale oznacza to, że muszę wiedzieć, który adres URL powinienem umieścić w łączu pobierania wstępnego, webpack zdecydowanie zna ten adres URL, jak mogę go uzyskać z pakietu internetowego?
Czy webpack ma łatwy sposób na osiągnięcie tego?
źródło
if (false) import(…)
- Wątpię, czy webpack analizuje martwy kod?import
powinien iść kod dynamiczny .Odpowiedzi:
AKTUALIZACJA
Możesz użyć preload-webpack-plugin z html-webpack-plugin , pozwoli ci to określić, co ma zostać wstępnie załadowane w konfiguracji i automatycznie wstawi tagi, aby wstępnie załadować swoją porcję
Uwaga: jeśli używasz WebPack v4, będziesz musiał zainstalować tę wtyczkę za pomocą
preload-webpack-plugin@next
przykład
AKTUALIZACJA 2
jeśli nie chcesz wstępnie ładować całego fragmentu asynchronicznego, ale tylko określony, gdy możesz to zrobić
możesz użyć wtyczki babcodera migcodera lub wykonać
preload-webpack-plugin
następujące czynnościnajpierw będziesz musiał nazwać ten fragment asynchroniczny za pomocą
webpack magic comment
przykładua następnie w konfiguracji wtyczki użyj tej nazwy jak
Przede wszystkim zobaczmy zachowanie przeglądarki, gdy określimy
script
tag lublink
tag, aby załadować skryptscript
znacznik, załaduje go, przeanalizuje i natychmiast wykonaasync
i tylko do zdarzeniadefer
DOMContentLoaded
link
)Teraz istnieje jakiś inny nie zaleca hackey sposobem jest transportowanie cały scenariusz i
string
albocomment
(bo czas oceny z komentarzem lub ciąg jest znikomy) i gdy trzeba wykonać, że można użyćFunction() constructor
alboeval
obie nie są zalecaneInne podejście do usług pracowników: (pozwoli to zachować pamięć podręczną po ponownym załadowaniu strony lub użytkownik przejdzie w tryb offline po załadowaniu pamięci podręcznej)
W nowoczesnej przeglądarce możesz użyć
service worker
do pobrania i buforowania odwołania (JavaScript, obraz, css cokolwiek), a gdy żądanie głównego wątku dla tego odwołania możesz przechwycić to żądanie i zwrócić odwołanie z pamięci podręcznej w ten sposób, nie analizujesz i nie oceniasz skryptu, gdy ładujesz go do pamięci podręcznej. Dowiedz się więcej o pracownikach serwisu tutajprzykład
jak widać, nie jest to zależne od pakietu WebPack, nie wchodzi ono w zakres pakietu WebPack, jednak za pomocą pakietu WebPack można podzielić pakiet, co pomoże lepiej wykorzystać pracownika serwisu
źródło
Aktualizacje: dołączam wszystkie rzeczy do pakietu npm, sprawdź to! https://www.npmjs.com/package/webpack-prefetcher
Po kilku dniach badań kończę pisanie dostosowanej wtyczki babel ...
Krótko mówiąc, wtyczka działa w następujący sposób:
Prefetcher to klasa pomocnicza, która zawiera manifest danych wyjściowych webpacka i może nam pomóc w wstawieniu linku pobierania wstępnego:
Przykład użycia:
Szczegółowy opis tej wtyczki można znaleźć tutaj:
Pobieranie wstępne - przejmij kontrolę z pakietu internetowego
Ponownie, jest to naprawdę hacking sposób i nie podoba mi się, jeśli chcesz, aby zespół webpack to zaimplementował, proszę zagłosuj tutaj:
Funkcja: pobranie dynamiczne importu na żądanie
źródło
Zakładając, że rozumiem, co próbujesz osiągnąć, chcesz przeanalizować i wykonać moduł po danym zdarzeniu (np. Kliknąć przycisk). Możesz po prostu umieścić instrukcję importu w tym zdarzeniu:
źródło