CommonsChunkPluginTüm giriş noktalarına bakmanın, aralarında ortak paketler / bağımlılıklar olup olmadığını kontrol edip bunları kendi paketlerine ayırdığına dair genel bir fikir anlıyorum.

Öyleyse, aşağıdaki yapılandırmaya sahip olduğumu varsayalım:

...
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'
}
...

Kullanmadan paketlersem CommonsChunkPlugin

Sonunda 3 yeni paket dosyası elde edeceğim:

• entry1.bundle.jshangi komple kodu içeren entry1.jsve jquerykendi çalışma zamanını içeren
• entry2.bundle.jshangi komple kodu içeren entry2.jsve jquerykendi çalışma zamanını içeren
• vendors.bundle.jshangi komple kodu içeren jqueryve some_jquery_pluginkendi çalışma zamanını içeren

Bu açıkça kötü çünkü jquerysayfada potansiyel olarak 3 kez yükleyeceğim , bu yüzden bunu istemiyoruz.

Kullanarak paketlersem CommonsChunkPlugin

CommonsChunkPluginAşağıdakilerden herhangi birine aktardığım argümanlara bağlı olarak :

• DURUM 1: Ben geçerseniz { name : 'commons' }aşağıdaki paket dosyaları ile sona erecek:

  • entry1.bundle.jstam kodu içeren, çalışma zamanı entry1.jsiçin bir gereksinim olan jqueryve içermeyen
  • entry2.bundle.jstam kodu içeren, çalışma zamanı entry2.jsiçin bir gereksinim olan jqueryve içermeyen
  • vendors.bundle.jstam kodu içeren, çalışma zamanı some_jquery_pluginiçin bir gereksinim olan jqueryve içermeyen
  • commons.bundle.jstam kodu jqueryiçeren ve çalışma zamanını içeren

  Bu şekilde, genel olarak bazı daha küçük paketler elde ederiz ve çalışma zamanı commonspakette yer alır. Oldukça iyi ama ideal değil.

• DURUM 2: Ben geçerseniz { name : 'vendors' }aşağıdaki paket dosyaları ile sona erecek:

  • entry1.bundle.jstam kodu içeren, çalışma zamanı entry1.jsiçin bir gereksinim olan jqueryve içermeyen
  • entry2.bundle.jstam kodu içeren, çalışma zamanı entry2.jsiçin bir gereksinim olan jqueryve içermeyen
  • vendors.bundle.jsçalışma zamanından gelen jqueryve içeren tam kodu some_jquery_pluginiçeren.

  Bu şekilde, yine genel olarak bazı daha küçük paketlerle sonuçlanırız, ancak çalışma zamanı artık vendorspakette yer almaktadır. Önceki durumdan biraz daha kötü çünkü çalışma zamanı artık vendorspakette.

• DURUM 3: Ben geçerseniz { names : ['vendors', 'manifest'] }aşağıdaki paket dosyaları ile sona erecek:

  • entry1.bundle.jstam kodu içeren, çalışma zamanı entry1.jsiçin bir gereksinim olan jqueryve içermeyen
  • entry2.bundle.jstam kodu içeren, çalışma zamanı entry2.jsiçin bir gereksinim olan jqueryve içermeyen
  • vendors.bundle.jshangi komple kodu içeren jqueryve some_jquery_pluginve çalışma zamanını içermiyor
  • manifest.bundle.js diğer tüm paketler için gereksinimleri ve çalışma zamanını içeren

  Bu şekilde, genel olarak bazı daha küçük paketler elde ederiz ve çalışma zamanı manifestpakette yer alır. Bu ideal durumdur.

Ne anlamıyorum / anladığımdan emin değilim

• In HALİNDE 2 neden olan düştün vendorshem ortak kod (içeren paket jquerykalma neyse) ve vendorsgirişe ( some_jquery_plugin)? Anladığım kadarıyla, CommonsChunkPluginburada yaptığı şey, ortak kodu ( jquery) vendorstoplamasıydı ve onu pakete çıkarmaya zorladığımızdan, ortak kodu pakete bir tür "birleştirdi" vendors(şimdi yalnızca some_jquery_plugin). Lütfen onaylayın veya açıklayın.

• In HALİNDE 3 Bence geçti ne oldu anlamıyorum { names : ['vendors', 'manifest'] }eklentisi için. vendorsPaket neden / nasıl bozulmadan tutuldu, her ikisini de içeriyor jqueryve some_jquery_pluginne zaman jqueryaçıkça ortak bir bağımlılıktır ve oluşturulan manifest.bundle.jsdosya neden oluşturulduğu şekilde oluşturuldu (diğer tüm paketleri gerektiriyor ve çalışma zamanını içeriyor)?

Bu nasıl CommonsChunkPluginçalışır.

Ortak bir yığın, birkaç giriş parçası tarafından paylaşılan modülleri "alır". Web paketi deposunda karmaşık bir yapılandırmanın güzel bir örneği bulunabilir .

CommonsChunkPluginParçaları mühürlü ve diske yazılır hemen önce, bu bellekte faaliyet demekse WebPack optimizasyonu fazı esnasında çalıştırılır.

Birkaç ortak parça tanımlandığında, sırayla işlenirler. Durum 3'te, eklentiyi iki kez çalıştırmak gibidir. Ancak CommonsChunkPlugin, modüllerin hareket etme şeklini etkileyen daha karmaşık bir konfigürasyona (minSize, minChunks, vb.) Sahip olabileceğini lütfen unutmayın .

DAVA 1:

1. Orada 3 olan entryparçaları ( entry1, entry2ve vendors).
2. Yapılandırma, commonsyığınları ortak bir yığın olarak ayarlar .
3. Eklenti, commonsortak parçayı işler (yığın olmadığından, oluşturulur):
   1. : Daha başka parçalar içinde bir kereden kullanılan modüller toplar entry1, entry2ve vendorskullanımını jquerymodülü bu parçalar kaldırılır ve ilave edilir, böylece commonsyığın.
   2. commonsYığın bir şekilde işaretlenir entrysırasında yığın entry1, entry2ve vendorsparçalar olarak işaretlenmemiş edilir entry.
4. Son olarak, commonsyığın bir entryyığın olduğundan çalışma zamanını ve jquerymodülü içerir.

DURUM 2:

1. Orada 3 olan entryparçaları ( entry1, entry2ve vendors).
2. Yapılandırma, vendorsyığınları ortak bir yığın olarak ayarlar .
3. Eklenti, vendorsortak parçayı işler :
   1. Daha başka parçalar içinde bir kereden kullanılan modüller toplar: entry1ve entry2kullanım jquerymodülü böylece (o eklenmez notu o bu parçalar kaldırılır vendorsçünkü yığın vendorsyığın zaten içerir).
   2. vendorsYığın bir şekilde işaretlenir entrysırasında yığın entry1ve entry2parçalar olarak işaretlenmemiş edilir entry.
4. Son olarak, vendorsyığın bir entryyığın olduğundan, çalışma zamanını ve jquery/ jquery_pluginmodüllerini içerir.

DURUM 3:

1. Orada 3 olan entryparçaları ( entry1, entry2ve vendors).
2. Yapılandırma, vendorsyığın ve manifestyığınları ortak parçalar olarak ayarlar .
3. Eklenti, manifestvar olmadığı için yığın oluşturur .
4. Eklenti, vendorsortak parçayı işler :
   1. Daha başka parçalar içinde bir kereden kullanılan modüller toplar: entry1ve entry2kullanım jquerymodülü böylece (o eklenmez notu o bu parçalar kaldırılır vendorsçünkü yığın vendorsyığın zaten içerir).
   2. vendorsYığın bir şekilde işaretlenir entrysırasında yığın entry1ve entry2parçalar olarak işaretlenmemiş edilir entry.
5. Eklenti, manifestortak parçayı işler (yığın olmadığından, oluşturulur):
   1. Birden fazla kullanılan modülleri diğer yığınlarda toplar: Birden fazla kullanılan modül olmadığından hiçbir modül taşınmaz.
   2. manifestÖbek olarak işaretlenir entryise yığın entry1, entry2ve vendorsolarak işaretlenmemiş olan entry.
6. Son olarak, manifestyığın bir entryyığın olduğundan çalışma zamanını içerir.

Umarım yardımcı olur.