Rozumiem, że patrzę CommonsChunkPlugin
na wszystkie punkty wejścia, sprawdza, czy istnieją między nimi wspólne pakiety / zależności i rozdziela je do własnego pakietu.
Załóżmy więc, że mam następującą konfigurację:
...
enrty : {
entry1 : 'entry1.js', //which has 'jquery' as a dependency
entry2 : 'entry2.js', //which has 'jquery as a dependency
vendors : [
'jquery',
'some_jquery_plugin' //which has 'jquery' as a dependency
]
},
output: {
path: PATHS.build,
filename: '[name].bundle.js'
}
...
Jeśli spakuję bez użycia CommonsChunkPlugin
Skończy się na 3 nowych plikach pakietu:
entry1.bundle.js
która zawiera kompletny kodentry1.js
ijquery
i zawiera swój własny czas pracyentry2.bundle.js
która zawiera kompletny kodentry2.js
ijquery
i zawiera swój własny czas pracyvendors.bundle.js
która zawiera kompletny kodjquery
isome_jquery_plugin
i zawiera swój własny czas pracy
Jest to oczywiście złe, ponieważ potencjalnie załaduję stronę jquery
3 razy, więc tego nie chcemy.
Jeśli połączę za pomocą CommonsChunkPlugin
W zależności od tego, jakie argumenty przekażę do CommonsChunkPlugin
któregokolwiek z poniższych:
PRZYPADEK 1: Jeśli zdam
{ name : 'commons' }
, skończę z następującymi plikami w pakiecie:entry1.bundle.js
który zawiera pełny kod zentry1.js
, wymógjquery
i nie zawiera środowiska uruchomieniowegoentry2.bundle.js
który zawiera pełny kod zentry2.js
, wymógjquery
i nie zawiera środowiska uruchomieniowegovendors.bundle.js
który zawiera pełny kod zsome_jquery_plugin
, wymógjquery
i nie zawiera środowiska uruchomieniowegocommons.bundle.js
który zawiera pełny kod zjquery
i zawiera środowisko wykonawcze
W ten sposób otrzymujemy ogólnie kilka mniejszych pakietów, a środowisko wykonawcze jest zawarte w
commons
pakiecie. Całkiem ok, ale nie idealne.PRZYPADEK 2: Jeśli zdam
{ name : 'vendors' }
, otrzymam następujące pliki pakietu:entry1.bundle.js
który zawiera pełny kod zentry1.js
, wymógjquery
i nie zawiera środowiska uruchomieniowegoentry2.bundle.js
który zawiera pełny kod zentry2.js
, wymógjquery
i nie zawiera środowiska uruchomieniowegovendors.bundle.js
która zawiera kompletny kodjquery
isome_jquery_plugin
oraz zawiera środowisko wykonawcze.
W ten sposób ponownie otrzymujemy ogólnie kilka mniejszych pakietów, ale środowisko wykonawcze jest teraz zawarte w
vendors
pakiecie. Jest trochę gorzej niż w poprzednim przypadku, ponieważ środowisko wykonawcze znajduje się teraz wvendors
pakiecie.PRZYPADEK 3: Jeśli zdam
{ names : ['vendors', 'manifest'] }
, otrzymam następujące pliki pakietu:entry1.bundle.js
który zawiera pełny kod zentry1.js
, wymógjquery
i nie zawiera środowiska uruchomieniowegoentry2.bundle.js
który zawiera pełny kod zentry2.js
, wymógjquery
i nie zawiera środowiska uruchomieniowegovendors.bundle.js
który zawiera pełny kod zijquery
isome_jquery_plugin
nie zawiera środowiska wykonawczegomanifest.bundle.js
który zawiera wymagania dla każdego innego pakietu i zawiera środowisko wykonawcze
W ten sposób otrzymujemy ogólnie kilka mniejszych pakietów, a środowisko wykonawcze jest zawarte w
manifest
pakiecie. To jest idealny przypadek.
Czego nie rozumiem / nie jestem pewien, czy rozumiem
W przypadku 2 Dlaczego skończyć z
vendors
pakietu zawierającego zarówno wspólny kod (jquery
) i co pozostało zvendors
wejściem (some_jquery_plugin
)? Z mojego zrozumieniaCommonsChunkPlugin
wynika, że w tym przypadku zebrał wspólny kod (jquery
), a ponieważ zmusiliśmy go do wyprowadzenia go dovendors
pakietu, w pewnym sensie „scalił” wspólny kod zvendors
pakietem (który teraz zawierał tylko kod zsome_jquery_plugin
). Potwierdź lub wyjaśnij.W PRZYPADKU 3 nie rozumiem, co się stało, gdy przeszliśmy
{ names : ['vendors', 'manifest'] }
do wtyczki. Dlaczego / w jaki sposóbvendors
pakiet został zachowany w stanie nienaruszonym, zawierający obie,jquery
asome_jquery_plugin
kiedyjquery
jest wyraźnie wspólną zależnością i dlaczego wygenerowanymanifest.bundle.js
plik został utworzony w taki sposób, w jaki został utworzony (wymagający wszystkich innych pakietów i zawierający środowisko wykonawcze)?
źródło
Odpowiedzi:
Tak to
CommonsChunkPlugin
działa.Wspólny fragment „otrzymuje” moduły współdzielone przez kilka fragmentów wejściowych. Dobry przykład złożonej konfiguracji można znaleźć w repozytorium Webpack .
Plik
CommonsChunkPlugin
Prowadzony jest w fazie optymalizacji Webpack, co oznacza, że działa w pamięci, tuż przed kawałki są uszczelnione i zapisane na dysku.Gdy zdefiniowano kilka typowych fragmentów, są one przetwarzane w kolejności. W twoim przypadku 3 jest to jak dwukrotne uruchomienie wtyczki. Należy jednak pamiętać, że
CommonsChunkPlugin
może mieć bardziej złożoną konfigurację (minSize, minChunks itp.), Która wpływa na sposób przenoszenia modułów.PRZYPADEK 1:
entry
kawałki (entry1
,entry2
ivendors
).commons
porcję jako wspólną porcję.commons
wspólny fragment (ponieważ fragment nie istnieje, jest tworzony):entry1
,entry2
ivendors
stosowaniejquery
tak moduł usuniętych z tych kawałków jest dodawane docommons
fragmentu.commons
jest oznaczony jakoentry
fragment, podczas gdy fragmentyentry1
,entry2
a nievendors
są oznaczone jakoentry
.commons
fragment jestentry
fragmentem, zawiera on środowisko wykonawcze ijquery
moduł.PRZYPADEK 2:
entry
kawałki (entry1
,entry2
ivendors
).vendors
porcję jako wspólną porcję.vendors
wspólny fragment:entry1
ientry2
użyj,jquery
aby moduł został usunięty z tych fragmentów (pamiętaj, że nie jest dodawany dovendors
fragmentu, ponieważvendors
fragment już go zawiera).vendors
jest oznaczony jakoentry
fragment, podczas gdy fragmentyentry1
i nieentry2
są oznaczone jakoentry
.vendors
fragment jestentry
fragmentem, zawiera on środowisko wykonawcze ijquery
/jquery_plugin
moduły.PRZYPADEK 3:
entry
kawałki (entry1
,entry2
ivendors
).vendors
fragment imanifest
fragment jako wspólne fragmenty.manifest
fragment, ponieważ nie istnieje.vendors
wspólny fragment:entry1
ientry2
użyj,jquery
aby moduł został usunięty z tych fragmentów (pamiętaj, że nie jest dodawany dovendors
fragmentu, ponieważvendors
fragment już go zawiera).vendors
jest oznaczony jakoentry
fragment, podczas gdy fragmentyentry1
i nieentry2
są oznaczone jakoentry
.manifest
wspólny fragment (ponieważ fragment nie istnieje, jest tworzony):manifest
jest oflagowany jakoentry
fragmententry1
,entry2
a nievendors
jest oznaczony jakoentry
.manifest
fragment jestentry
fragmentem, zawiera on środowisko wykonawcze.Mam nadzieję, że to pomoże.
źródło
{ names : ['vendors', 'manifest'] }
jest jak uruchomienie jej dwa razy, raz z{ name : 'vendors' }
i raz z{ name : 'manifest' }
, prawda? 3) Kiedy mówimy „Wtyczka przetwarza wspólny fragment”, mamy na myśli to, że tworzy zawartość, którą wypluje wbundle.js
pliku, w pamięci, prawda? 4) Dopóki nie "przetworzy wszystkich typowych fragmentów", nie zapisał żadnych danych wyjściowych do pliku, wszystko jest w pamięcientry1.js
ientry2.js
między nimi był inny wspólny plik, inny niżjquery
plik, nazwijmy toownLib.js
. Czy w PRZYPADKU 2 i PRZYPADKU 3ownLib.js
skończyłoby się tovendors.bundle.js
poprawnie? Jak można to zrobić, aby wspólne pliki, inne niż pliki dostawców, były rozdzielane na osobne fragmenty, pozavendors
fragmentem? Przepraszam, że przeszkadzam, ale wciąż uczę się korzystać z webpackaownLib.js
zostanie umieszczony w pierwszym wspólnym kawałku. Jeśli chcesz zbierać wspólnych zależności, w innym chunck, trzeba przejść coś takiego:{ names : ['common', 'vendors', 'manifest'] }
.