web paketi
webpack, SplitChunksPlugin adlı bir eklentiyle birlikte gelir. Bu eklenti,
Paketleyicinin JavaScript dosyalarını nasıl böleceğini yapılandırın. webpack hem
dinamik import() ve statik import ifadeleri. Kullanıcının davranışı
SplitChunksPlugin, içindeki chunks seçeneği belirtilerek değiştirilebilir
yapılandırma:
chunks: async varsayılan değerdir ve dinamik import() çağrılarını ifade eder.chunks: initial, statik import çağrılarına işaret eder.chunks: all, hem dinamik import() hem de statik içe aktarmaları kapsar. Böylece,
grupları async ile initial içe aktarmaları arasında paylaşmak için kullanabilirsiniz.
Web paketi dinamik bir import() ifadesiyle karşılaştığında varsayılan olarak kullanılır. o
o modül için ayrı bir yığın oluşturur:
/* main.js */
// An application-specific chunk required during the initial page load:
import myFunction from './my-function.js';
myFunction('Hello world!');
// If a specific condition is met, a separate chunk is downloaded on demand,
// rather than being bundled with the initial chunk:
if (condition) {
// Assumes top-level await is available. More info:
// https://v8.dev/features/top-level-await
await import('/form-validation.js');
}
Önceki kod snippet'inin varsayılan web paketi yapılandırması ikiyle sonuçlanır:
parçalar:
- Web paketinin
initial yığını olarak sınıflandırdığı main.js yığını
main.js ve ./my-function.js modülünü içerir.
- Yalnızca
form-validation.js içeren async yığını
dosya karması kullanılır). Bu yığın yalnızca indirildi
condition değerinin doğru olup olmadığını kontrol edin.
Bu yapılandırma, form-validation.js yığınının yüklenmesini
zaten gereklidir. Bu, komut dosyasını
değerlendirme süresini artırır. Komut dosyası indirme ve değerlendirme
form-validation.js parçası için bir koşul karşılandığında,
Bu durumda, dinamik olarak içe aktarılan modül indirilir. Mesela
bir çoklu dolgunun yalnızca belirli bir tarayıcı için indirildiği veya
içe aktarılan modül kullanıcı etkileşimi için gereklidir.
Diğer yandan, SplitChunksPlugin yapılandırmasını
chunks: initial, kodun yalnızca ilk parçalarda bölünmesini sağlar. Bunlar:
statik olarak içe aktarılan veya web paketinin entry içinde listelenenler gibi parçalar
özelliği ekleyin. Yukarıdaki örneğe göre, sonuçta ortaya çıkan parça,
form-validation.js ve main.js kombinasyonunun tek bir komut dosyası içinde olması,
bu da ilk sayfa yükleme performansının düşmesine neden olabilir.
SplitChunksPlugin seçenekleri, daha büyük boyutları ayırmak için de yapılandırılabilir
komut dosyalarını daha küçük birden çok komut dosyasına dönüştürebilirsiniz (örneğin, maxSize seçeneğini kullanarak)
parçaları ayrı dosyalara bölme talimatını vermek için
maxSize tarafından belirtilmiş. Büyük komut dosyalarını küçük dosyalara bölmek
Bazı durumlarda CPU'yu yoğun şekilde kullanan komut dosyası değerlendirmesi gibi, yükleme duyarlılığını iyileştirir.
işler daha küçük görevlere bölünür (bunlar ana görevlerin
daha uzun süreler için iş parçacığı.
Buna ek olarak, daha büyük JavaScript dosyaları oluşturmak,
sorun yaşama ihtimali artar. Örneğin, çok büyük bir
hem çerçeve hem de birinci taraf uygulama koduna sahip büyük komut dosyası.
paket, yalnızca çerçeve güncellendiğinde geçersiz kılınabilir.
kaynakta yer alır.
Öte yandan, daha küçük komut dosyası dosyaları,
Ziyaretçi, kaynakları önbellekten alarak sayfaların daha hızlı yüklenmesini sağlar.
yinelenen ziyaretler. Bununla birlikte, küçük dosyalar, büyük boyutlu dosyalardan daha az sıkıştırma
Ardışık alçak reklam öğeleriyle sayfa yüklemelerinde ağ gidiş dönüş süresini
dikkat edin. Önbelleğe alma arasında denge kurmaya dikkat edilmelidir
verimi, sıkıştırma etkililiğini ve komut dosyası değerlendirme süresini
takip eder.
web paketi demosu
web paketi SplitChunksPlugin demosu.
Bilginizi test etme
Kod gerçekleştirilirken hangi import ifadesi türü kullanılır?
bölünüyor mu?
Statik import.
Tekrar deneyin.
Hangi tür import ifadenin üst kısımda olması olması gerekir
bir JavaScript modülünün parçası olarak mı yoksa başka bir konumda mı?
Dinamik import().
Tekrar deneyin.
Webpack'te SplitChunksPlugin kullanılırken
async yığını ile
initial yığın mı?
async parça, dinamik import() kullanılarak yüklendi
ve initial parça statik veri kullanılarak yüklenir
import.
Doğru!
async parça, statik import kullanılarak yüklendi
ve initial parça, dinamik etiket kullanılarak yüklendi
import().
Tekrar deneyin.
Sıradaki: Resimleri ve
