Bir Vue.js uygulamasının paket boyutunun azaltılması, sayfa yükü performansını ve kullanıcı deneyimini geliştirmek için çok önemlidir. Daha küçük bir paket boyutu daha hızlı indirme, daha az ayrıştırma ve daha hızlı uygulama başlangıç sürelerine yol açar. Bağımlılıkları optimize etmekten gelişmiş yapı araçları ve tekniklerinin kullanılmasına kadar çeşitli stratejiler ve en iyi uygulamalar vardır.
Ağaç sallama ile bir yapı adımı kullanın
Paket boyutunu azaltmanın en etkili yollarından biri, ağaç sarmayı destekleyen modern yapı araçlarını kullanmaktır. Ağaç sallama, kullanılmayan kodu son paketten ortadan kaldıran bir süreçtir. Vue'nun API'leri ve birçok modern JavaScript kütüphanesi, doğru bir şekilde paketlendiğinde ağaç tarafından tasarlanabilir olacak şekilde tasarlanmıştır. Örneğin, yerleşik `` `` gibi kullanılmayan VUE bileşenleri, kullanılmadığı takdirde üretim yapılarına dahil edilmeyecektir. Yapı süresi boyunca ön komplo şablonları, VUE derleyicisini tarayıcıya göndermeyi önler, bu da yaklaşık 14 kb minifiye ve gzpipped javascript tasarrufu sağlayarak çalışma zamanı maliyetlerini azaltır.
Bağımlılıkları yönetin ve analiz edin
Bağımlılıklar genellikle paket boyutuna önemli ölçüde katkıda bulunur. Aşağıdakiler önemlidir:
-ES modülü formatları sunan ve ağaç sallayan dostu olan bağımlılıkları seçin (örneğin, `` lodash 'yerine `` Lodash-ES' '').
-Büyük veya gereksiz paketleri tanımlamak için `` Webpack-Buunddle-Analyzer 'gibi araçları kullanarak bağımlılıklarınızı düzenli olarak denetleyin.
- Kullanılmayan bağımlılıkları `Depcheck 'veya` npm Prune' gibi araçlar kullanarak kaldırın.
- Büyük bağımlılıkları daha küçük, daha odaklı alternatiflerle değiştirin. Örneğin, `` echarts '' gibi ağır grafik kütüphanesini Chartist gibi daha küçük bir kütüphaneyle değiştirmek, paket boyutunu büyük ölçüde azaltabilir.
tembel yük rotaları ve bileşenleri
Tembel yükleme, yollar veya bileşenler için kodun yalnızca gerektiğinde, her şeyi önceden bir araya getirmek yerine yüklendiği bir stratejidir. Vue yönlendirici, bileşenleri dinamik olarak içe aktararak, demeti başlangıç yük performansını artıran daha küçük parçalara bölerek tembel yükleme yollarını destekler. Bu yöntem, ana paketin boyutunu önemli ölçüde azaltır ve kullanıcılar uygulamada gezindikçe zaman içinde kod yükünü yayar.
Kod bölme ve dinamik ithalat kullanın
Vue projelerinde yaygın olarak kullanılan WebPack, dinamik `ithalat ()` `ifadeleri yoluyla kodun bölünmesini destekler. Bu, uygulamanızın parçalarının eşzamansız olarak yüklenen ayrı paketlere bölünebileceği anlamına gelir. Kodun doğru şekilde bölünmesi, yalnızca talep üzerine gerekli kodu yükleyerek paket boyutunun yönetilmesine yardımcı olur.
Minifikasyon ve Sıkıştırma
Minifikasyon, Whitespace, yorumları ve değişken adlarını kısaltarak JavaScript dosyalarının boyutunu azaltır. UglifyJs veya Terser gibi araçlar (genellikle modern yapı işlemlerine entegre) Üretim oluşturma adımı sırasında kodu otomatik olarak minnettar. Ayrıca, gzping veya brotli sıkıştırması, kullanıcılara sunulan varlıkların boyutunu daha da azaltır.
Belirli kullanım durumları için daha küçük vue alternatifleri kullanın
Tam Vue.js çerçevesinin çok ağır olabileceği projeler için, özellikle aşamalı geliştirme durumları için, sadece 6 kb civarında olan Petite Vue gibi daha hafif alternatifler kullanmayı düşünün. Proje tam VUE ekosistemini gerektirmiyorsa bu yararlıdır.
Kütüphanelerin yalnızca gerekli kısımlarını kapsam ve içe aktarın
Bootstrap Vue veya Lodash gibi birçok büyük kütüphane, tüm kütüphane yerine yalnızca belirli bileşenlerin veya işlevlerin içe aktarılmasına izin verir. Örneğin, tüm Bootstrap Vue kütüphanesini içe aktarmak yerine, yalnızca ihtiyacınız olan bileşenleri içe aktarın, bu da kullanılmayan parçaları hariç tutarak demet boyutunu azaltır. Benzer şekilde, Lodash'ı içe aktarın modüler olarak işlev görür (`` tüm Lodash yerine 'Lodash/Map' 'dan ithalat haritası).
Satır içi stillerden ve gerekmiyorsa büyük CSS çerçevelerinden kaçının
Bootstrap gibi CSS çerçeveleri demet boyutuna eklenir. Tüm çerçeveye gerçekten ihtiyacınız olup olmadığını değerlendirin ve daha esnek ve daha küçük CSS paketleri için Tailwind CSS gibi alternatifleri düşünün. Ayrıca, kullanılmayan stil ithalatını kaldırmayı veya mümkünse CSS'yi harici olarak barındırmayı düşünün.
Sunucu tarafı oluşturma ve statik site üretimi
SSR (sunucu tarafı oluşturma) veya SSG (statik site üretimi) aracılığıyla bazı oluşturmayı sunucuya taşımak, istemci tarafında gereken javascript miktarını azaltarak paket boyutunu etkili bir şekilde düşürür. Bu, etkileşim için minimum JS ile istemciye önceden inşa edilmiş HTML göndererek sunucuya verilen sorumluluklar oluşturur.
Resimleri ve diğer varlıkları optimize edin
Bu, JavaScript demeti boyutunu doğrudan etkilemese de, görüntüleri, yazı tiplerini ve varlıkları optimize etmek, JavaScript iyileştirmelerini tamamlayan genel sayfa yükü performansına katkıda bulunur.
Modern JavaScript Özelliklerini ve Polyfills'i akıllıca kullanın
Modern JavaScript Sözdizimi kullanmak, modern yapı araçlarıyla birleştirildiğinde daha küçük demetlere yol açabilir. Eski tarayıcıları hedeflemedikçe gereksiz çoklu dolgulardan kaçının ve kullanıcı tarayıcı özelliklerine dayalı koşullu polyfills düşünün.
Vue.js paket boyutunu azaltmak için uygulamaların özeti
- Ağaç sallama ile oluşturma araçları kullanın (örn. Webpack, Vite).
- Pre-Kompile Vue Şablonları.
-Bundle içeriğini `` webpack-sepet-analyzer '' gibi araçlarla analiz edin.
- Ağır bağımlılıkları çıkarın veya değiştirin.
- Sadece gerekli bileşenleri veya kütüphanelerden işlevleri içe aktarın.
- Güzergahlar ve bileşenler için tembel yükleme uygulayın.
- Kod bölme ve dinamik ithalat kullanın.
- Minifikasyon ve sıkıştırma uygulayın.
- Belirli uygulamalar için Petite Vue gibi daha küçük alternatifleri düşünün.
- CSS kullanımını optimize edin ve tüm çerçeveleri gereksiz yere aktarmaktan kaçının.
- İstemci tarafı paket boyutunu azaltmak için SSR veya SSG kullanın.
- Varlıkları optimize edin ve modern JavaScript özelliklerini dikkatlice kullanın.