2016-12-08 7 views
13

Pracuję w firmie, która ma niestandardową implementację require. Implementacja pozwala wymagać modułu tylko wtedy, gdy został już pobrany. Jeśli ścieżka kodowa zależy od modułu, ale ścieżka kodowa nie zawsze jest trafiona, moduł nie zawsze jest wymagany. To drastycznie zmniejszyło nasz rozmiar pliku.Sprawdzanie, czy plik został pobrany/wymagany już w pakiecie Web Pack?

Oto przykład, jak może to być przydatne:

if (page === PROFILE) { 
    // ProfileHelper should already be downloaded if we're on the profile page. 
    if (isRequired('ProfileHelper')) { 
    const ProfileHelper = require('ProfileHelper'); 
    ProfileHelper.doSomething(); 
    } else { 
    LogError('ProfileHelper isn\'t loaded on the profile page.'); 
    } 
} else if (page === FEED) { 
    // FeedHelper should already be downloaded if we're on the feed page. 
    if (isRequired('FeedHelper')) { 
    const FeedHelper = require('FeedHelper'); 
    FeedHelper.doSomething(); 
    } else { 
    LogError('FeedHelper isn\'t loaded on the feed page.'); 
); 
} 

ProfileHelper nie jest załadowany na stronach paszowych i FeedHelper nie jest załadowany na stronach profilu. Czy Webpack ma coś takiego?

Istnieje potencjalne rozwiązanie tutaj: https://github.com/webpack/webpack/issues/526

Jednak to było z 2 lata temu, a kod wygląda całkiem hacky. Czy istnieje lepszy sposób? Jeśli to nadal jest najlepszy sposób, daj mi znać za pomocą odpowiedzi i zaznaczę ją jako poprawną odpowiedź.

Edycja dla wyjaśnienia:

Gdybym wymagane zarówno ProfileHelper i FeedHelper cały czas, a następnie jeden z modułów nie będzie używany. Co najwyżej jedna z nich jest pobierana na dowolnej stronie.

Nie ma to nic wspólnego z dedupcją.

Edit

Spółka generuje wiele różnych pakietów dla różnych stron, ale te zestawy mają wiele plików. Te pliki zachowują się inaczej w zależności od strony, na której się znajdują. Często nie wszystkie moduły odwołują się do pliku dla danej strony. W takim przypadku te pliki po prostu nie są spakowane.

+0

Jeśli pytanie brzmi: czy WebPack de-duplikatów wymaganych modułów? Tak. –

+0

Moje pytanie brzmi: w jaki sposób wymagać czegoś tylko wtedy, gdy jest już pobrane. –

+0

Może to, czego naprawdę potrzebujesz, to dzielenie kodu. https://webpack.github.io/docs/code-splitting.html – Ming

Odpowiedz

3

Webpack będzie deduplikować wszystkie moduły wymagane wiele razy, a moduły, które są już załadowane, nie zostaną ponownie zainicjowane (zgodnie ze specyfikacją CommonJS). Zasadniczo, po prostu wymagają wszystkich zależności bezpośrednio i gotowe!

Co ważniejsze: nie owijaj swoich wymagań, jeśli używasz pakietu internetowego. Analiza statyczna mająca na celu sprawdzenie, które moduły rzeczywiście wykorzystujesz, przestanie działać poprawnie, a pakiet webowy będzie zbyt zawiły.

+0

Webpack od v2 będzie również zawierać tylko te zależności, które są używane. Tak więc użyj wymaganego, jak chcesz, w procesie łączenia w pakiet, który zostanie uwzględniony tylko raz. –

+0

Po prostu wyjaśniając, nie ma to nic wspólnego z dedupcją. –

+0

@ MichałIgnaszewski Wszystkie zależności są używane, ale nie cały czas. To znaczy. cały plik jest ładowany na wiele stron, ale strony nie korzystają ze wszystkich ścieżek kodowania. Zależności są dla określonych ścieżek kodowych. –

0

Takie podejście jest sprzeczne z pakowaniem w pakiet internetowy.

Oświadczenia wymagające są tym, co poleca pakiet internetowy na temat tego, co należy skompilować. Nie będzie nigdy kompilować warunkowych wymagań, ponieważ będą one oceniane w czasie wykonywania (ale pakiety Webpack są wstępnie skompilowane), a pakiet Webpack nie doda ich do swoich pakietów.

Co szukasz jest code-łupania: https://webpack.js.org/guides/code-splitting-require/

Poradniki:

+0

Firma, w której generowałem wiele różnych pakietów dla różnych stron. Większość modułów nie musi sprawdzać, który pakiet jest wymagany, wystarczy jedynie sprawdzić, które moduły są już wymagane. Podział kodu zwiększa żądania sieciowe, a to, czego chcę, nie wymaga dodatkowych żądań sieciowych. –

Powiązane problemy