Jak zoptymalizować czas kompilacji webpacka za pomocą narzędzia prefetchPlugin & Analysis?

96

Poprzednie badania:

Jak mówi wiki webpack, możliwe jest użycie narzędzia analitycznego w celu optymalizacji wydajności kompilacji:

z: https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats

Wskazówki ze statystyk budowy

Istnieje narzędzie do analizy, które wizualizuje kompilację, a także zapewnia wskazówki, jak można zoptymalizować rozmiar kompilacji i wydajność kompilacji .

Możesz wygenerować wymagany plik JSON, uruchamiając pakiet webpack --profile --json> stats.json


Wygenerowałem plik statystyk ( dostępny tutaj ), przesłałem go do narzędzia analizy webpacka
i pod zakładką Wskazówki poleciłem użyć prefetchPlugin:

z: http://webpack.github.io/analyse/#hints

Długie łańcuchy budowy modułów

Użyj pobierania wstępnego, aby zwiększyć wydajność kompilacji. Pobierz wstępnie moduł ze środka łańcucha .


Przekopałem sieć na lewą stronę, aby znaleźć jedyną dokumentację dostępną na prefechPlugin:

od: https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

Żądanie normalnego modułu, które jest rozwiązywane i budowane jeszcze przed wystąpieniem żądania. Może to zwiększyć wydajność. Spróbuj najpierw profilować kompilację, aby określić sprytne punkty pobierania wstępnego .



Moje pytania:

  • Jak poprawnie używać prefetchPlugin?
  • Jaki jest właściwy przepływ pracy, aby używać go z narzędziem Analiza?
  • Skąd mam wiedzieć, czy prefetchPlugin działa? jak mogę to zmierzyć?
  • Co to znaczy pobrać wstępnie moduł ze środka łańcucha ?

Naprawdę docenię kilka przykładów

Proszę, pomóż mi uczynić to pytanie cennym źródłem informacji dla następnego programisty, który chce używać prefechPlugin i narzędzi analitycznych. Dziękuję Ci.

Asaf Katz
źródło
1
Jak mamy używać narzędzia do analizy statystyk? Gdy klikam przycisk przesyłania, nic się nie dzieje i nie ma przycisku przesyłania. Tylko „użyj przykładu”
TetraDev,
Dane wyjściowe konsoli mówią Uncaught SyntaxError: Unexpected token r in JSON at position 0podczas przesyłania jakichkolwiek stats.json
TetraDev,
1
@TetraDev oznacza to, że masz błąd w swoim pliku JSON. Spróbuj otworzyć go w edytorze tekstu i sprawdź, czy jest coś, co nie wygląda jak prawidłowy JSON. (Mam ten sam problem z wyjściem debugowania z Webpack w pierwszym wierszu).
maufl
Dokumenty mają, > stats.jsonale zapisuje kilka dodatkowych linii na górze, które psują parser
Alex Riina

Odpowiedzi:

35

Tak, dokumentacja wtyczki pobierania z wyprzedzeniem prawie nie istnieje. Po zastanowieniu się, jest dość prosty w użyciu i nie ma dużej elastyczności. Zasadniczo pobiera dwa argumenty, kontekst (opcjonalnie) i ścieżkę modułu (względem kontekstu). Kontekst, w Twoim przypadku będzie /absolute/path/to/your/project/node_modules/react-transform-har/przy założeniu, że w zrzucie tylda odnosi się node_moduleszgodnie WebPACK w rozdzielczości node_module .

Rzeczywisty moduł pobierania wstępnego powinien być idealnie głęboki nie więcej niż trzy zależności modułu. Więc w twoim przypadku isFunction.jsjest to moduł z długim łańcuchem kompilacji i idealnie powinien być wstępnie pobrany nagetNative.js

Podejrzewam jednak, że w twojej konfiguracji jest coś dziwnego, ponieważ zależności łańcucha budowania odnoszą się do zależności modułów, które powinny być automatycznie optymalizowane przez webpack. Nie jestem pewien, jak to osiągnąłeś, ale w naszym przypadku nie widzimy żadnych ostrzeżeń dotyczących długich łańcuchów kompilacji w node_modules. Większość naszych długich łańcuchów budowy wynika z głęboko zagnieżdżonych komponentów reakcyjnych, które wymagają SCSS. to znaczy:

wprowadź opis obrazu tutaj

Niezależnie od tego, będziesz chciał dodać nową wtyczkę do każdego ostrzeżenia, na przykład:

plugins: [
    new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
    new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];

Drugi argument musi być łańcuchem wskazującym na względną lokalizację modułu. Mam nadzieję, że to ma sens.

4m1r
źródło
Próbuję pozbyć się niektórych moich kompilacji i nawet po wyjaśnieniu nadal jestem naprawdę zdezorientowany, jak używać tego narzędzia. Czy możesz wyjaśnić, co dokładnie oznacza „kontekst” i jakie powinny być parametry w pobieraniu wstępnym? Nie jestem pewien, co dokładnie dzieje się we wtyczce
ThrowsException
Nie używałem tego od jakiegoś czasu, ale prawdopodobnie nadal jest to samo. Wtyczka powinna mieć tylko dwa argumenty. Jeden, kontekst, czyli kontekst modułu, więc na przykład app/components/module.jsxbyłby 'app'i myślę, że drugi powinien być względną lokalizacją, tj.'components/module.jsx'
4m1r
1
Ok, mam jeszcze jedną przepustkę. Wypróbowałem co najmniej dwa tuziny rozwiązań PrefetchPlugin i wydaje się, że nic nie usuwa ich z mojego długiego łańcucha kompilacji. Mam ten sam problem, co plakat, gdzie mam moduł węzła, który jest w rzeczywistości w moim długim łańcuchu kompilacji i próbuję go pobrać z wyprzedzeniem. Nie wiem, czy może webpack nie wie, jak sobie z tym poradzić.
ThrowsException
Użyłem wtyczki pobierania wstępnego, aby znacznie zwiększyć wydajność mojego projektu, który korzysta z pliku handlebars.js. Oto składnia, która działała dla mnie:new webpack.PrefetchPlugin(__dirname + "/node_modules", "handlebars/runtime.js"),
Andre
Ponadto, jeśli rzecz node_modules, którą chcesz pobrać wstępnie, nie jest pakietem (tj. Nie znajduje się w ), możesz po prostu przekazać ciąg żądania . Zauważ, że pierwszy argument, kontekst , jest opcjonalny.
natchiketa
2

Prawdopodobnie środek twojego łańcucha react-transform-hmr/index.jszaczyna się mniej więcej w połowie. Możesz spróbować PrefetchPlugin('react-transform-hmr/index')ponownie uruchomić swój profil, aby sprawdzić, czy pomoże to przyspieszyć całkowity czas tworzenia.

Aaron Jensen
źródło
tylko gorzej .. od 2351ms do 2361ms, to też wyrzuca błądEntry module not found: Error: Cannot resolve module 'react-transform-hmr/index' in /Users/asafkatz/Development/my-react-builerplate
Asaf Katz
4
cóż, różnica 10 ms nie jest gorsza, różnica jest nieistotna statystycznie. Będę bawić w / różne rzeczy, react-transform-hmrlub react-transform-hmr/index.jsitp
Aaron Jensen