Bu codelab'de aşağıdaki uygulamanın performansını iyileştirmek için: gereksiz bağımlılıkları ortadan kaldırmaktır.
Ölçüm
Web sitenizin ne kadar iyi performans gösterdiğini ölçmek için optimizasyon yapabilirsiniz.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran .
En sevdiğiniz kediyi tıklayın. Firebase'in Realtime Database, bu nedenle gerçek zamanlı olarak güncellenir. senkronize edildiğinden emin olun. 🐈
- Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Önbelleği devre dışı bırak onay kutusunu seçin.
- Uygulamayı yeniden yükleyin.
Bu basit uygulamayı yüklemek için yaklaşık 1 MB boyutunda JavaScript gönderiliyor.
Geliştirici Araçları'ndaki proje uyarılarına göz atın.
- Konsol sekmesini tıklayın.
Warnings
öğesinin yanındaki seviyeler açılır listesinde etkin olduğundan emin olunFilter
giriş.
- Gösterilen uyarıya göz atın.
Bu uygulamada kullanılan kitaplıklardan biri olan Firebase, geliştiricilerin e-postalarını içe aktarmamalarını söyleyen bir uyarıda bulunarak yalnızca kullanılan bileşenlerden oluşur. Başka bir deyişle, yüklenmesi için bu uygulamada kaldırılabilecek kullanılmayan kitaplıklar daha hızlı.
Belirli bir kitaplığın kullanıldığı, ancak zaman içinde daha basit bir alternatif. Gerekli olmayan kitaplıkları kaldırma kavramı, ele alacağız.
Paket analiz ediliyor
Uygulamada iki temel bağımlılık vardır:
- Firebase: Firebase için birçok özellik sunan bir platform Android cihazlar veya web uygulamaları için kullanışlı hizmetler. Gerçek Zamanlı Analiz Veritabanı şu amaçlarla kullanılır: bilgileri gerçek zamanlı olarak saklayıp senkronize edebilir.
- Moment.js: çalıştırmayı kolaylaştıran bir yardımcı program kitaplığı
JavaScript'te tarihleri ele alma. Her kedinin doğum tarihi
Firebase veritabanıdır ve
moment
kullanılarak birkaç hafta içindeki yaşı hesaplamak için kullanılmaktadır.
Yalnızca iki bağımlılık, yaklaşık 1 MB'lık bir paket boyutuna nasıl katkıda bulunabilir? Evet, herhangi bir bağımlılığın da kendi sorumluluğunda bağımlılıklara, yani bir dalın her derinliğinde/dalında ikiden çok daha fazlasını bağımlılık "ağacı" dikkate alınır. Bir uygulama kolayca büyüyebilir çok sayıda bağımlılık varsa bu süreci nispeten kısa sürede tamamlayabilirsiniz.
Sorunun ne olduğunu daha iyi anlamak için paketleyiciyi analiz edin. Paydaşlarla toplantı yaparken
topluluk tarafından oluşturulmuş farklı araçlar, örneğin
webpack-bundle-analyzer
.
Bu aracın paketi uygulamaya devDependency
olarak zaten dahil.
"devDependencies": {
//...
"webpack-bundle-analyzer": "^2.13.1"
},
Yani doğrudan web paketi yapılandırma dosyasında kullanılabilir.
webpack.config.js
öğesinin en başında içe aktarın:
const path = require("path");
//...
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
Şimdi bunu, plugins
dizisi içindeki dosyanın en sonuna bir eklenti olarak ekleyin:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
};
Uygulama yeniden yüklendiğinde, tüm uygulamanın paketinin kullanılmasıdır.
Kedi yavrusu kedileri görmek kadar sevimli değil EMM, ancak yine de inanılmaz derecede faydalı. Herhangi bir paketin üzerine geldiğinizde, paketin boyutu üç farklı şekillerde kullanabilirsiniz:
İstatistik boyutu | Herhangi bir küçültme veya sıkıştırma işleminden önceki boyut. |
---|---|
Ayrıştırılmış boyut | Paket içindeki gerçek paketin, derlendikten sonra boyutu. Web paketinin (bu uygulamada kullanılan) Sürüm 4, otomatik olarak derlediği için, bu sayı, istatistik değerlerinden daha küçüktür. seçin. |
Gzip ile sıkıştırılmış boyut | Paketin gzip kodlamasıyla sıkıştırıldıktan sonraki boyutu. Bu ayrı bir kılavuzda ele alınmıştır. |
Webpack-paket analizi aracı sayesinde kullanılmayan veya olmayan paketin büyük bir kısmını oluşturan gereksiz paketler
Kullanılmayan paketleri kaldırma
Görselleştirme, firebase
paketinin çok daha fazla öğe içerdiğini gösteriyor
daha kolay oluyor. Bu pakete aşağıdakiler gibi ek paketler dahildir:
firestore
auth
storage
messaging
functions
Bunların hepsi Firebase tarafından sunulan muhteşem hizmetlerdir (ve belgeler daha fazla bilgi edinebiliyorum), ancak bunların hiçbiri uygulamada kullanılmıyor. Dolayısıyla tümünün içe aktarılması için bir neden yoktur.
Uygulamayı tekrar görmek için webpack.config.js
uygulamasında değişiklikleri geri alın:
- Eklenti listesinden
BundleAnalyzerPlugin
eklentisini kaldırın:
plugins: [
//...
new BundleAnalyzerPlugin()
];
- Şimdi, kullanılmayan içe aktarma işlemini dosyanın en üstünden kaldırın:
const path = require("path");
//...
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
Uygulama artık normal bir şekilde yüklenmelidir. Güncellemek için src/index.js
dosyasını değiştirin.
Firebase'den içe aktarma işlemleri.
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
Artık uygulama yeniden yüklendiğinde Geliştirici Araçları uyarısı gösterilmiyor. Tarayıcının Geliştirici Araçları Ağ panelinde de paket boyutunun güzel bir küçülmesi görülüyor:
Paket boyutunun yarısından fazlası kaldırıldı. Firebase, Google Analytics 4'te
içerir ve geliştiricilere, yalnızca gerçekten satın alma sürecinde yer alan
gerekir. Bu uygulamada depolamak ve senkronize etmek için yalnızca firebase/database
kullanıldı
sahip olmayabilir. için API yüzeyini ayarlayan firebase/app
içe aktarması
her farklı hizmet her zaman gereklidir.
lodash
gibi diğer popüler kitaplıklar da geliştiricilerin
paketlerinin farklı bölümlerini seçerek içe aktarabilir. Fazla çalışma gerektirmeden
bir uygulamadaki kitaplık içe aktarmalarını yalnızca kullanılan öğeleri içerecek şekilde güncelleme
önemli performans artışları sağlayabilir.
Paketin boyutu epey küçülmüş olsa da, boyut olarak hâlâ çok şey var! 😈
Gereksiz paketleri kaldırma
Firebase'in aksine, moment
kitaplığının bazı bölümlerinin içe aktarılması şu şekilde yapılamaz:
kolay ama belki tamamen kaldırılabilir.
Sevimli kedi yavrularının doğum günü, Unix biçiminde (milisaniye) saklanır. Firebase veritabanı.
Bu, belirli bir tarih ve saatin 1 Ocak 1970 00:00 UTC'den itibaren geçen milisaniye. Mevcut aynı biçimde hesaplanabilir, bu iki fonksiyonla birkaç hafta olabilir.
Her zaman olduğu gibi, buradaki talimatları uygulayarak kopyalayıp yapıştırmamaya çalışın. Başlangıç tarihi
moment
, src/index.js
konumundaki içe aktarma işlemlerinden kaldırılıyor.
import firebase from 'firebase/app';
import 'firebase/database';
import * as moment from 'moment';
Veritabanımızdaki değer değişikliklerini yöneten bir Firebase etkinlik işleyicisi vardır:
favoritesRef.on("value", (snapshot) => { ... })
Hafta sayısını hesaplamak için bunun üstüne küçük bir fonksiyon verilen tarih:
const ageInWeeks = birthDate => {
const WEEK_IN_MILLISECONDS = 1000 * 60 * 60 * 24 * 7;
const diff = Math.abs((new Date).getTime() - birthDate);
return Math.floor(diff / WEEK_IN_MILLISECONDS);
}
Bu fonksiyonda, geçerli tarih ile
saat (new Date).getTime()
ve doğum tarihi (birthDate
bağımsız değişkeni zaten
milisaniye cinsinden) hesaplanır ve bir milisaniye cinsinden milisaniye sayısına bölünür
bir hafta sürer.
Son olarak, tüm moment
örnekleri etkinlik işleyicide
işlevini kullanın:
favoritesRef.on("value", (snapshot) => { const { kitties, favorites, names, birthDates } = snapshot.val(); favoritesScores = favorites; kittiesList.innerHTML = kitties.map((kittiePic, index) => {const birthday = moment(birthDates[index]);return ` <li> <img src=${kittiePic} onclick="favKittie(${index})"> <div class="extra"> <div class="details"> <p class="name">${names[index]}</p><p class="age">${moment().diff(birthday, 'weeks')} weeks old</p><p class="age">${ageInWeeks(birthDates[index])} weeks old</p> </div> <p class="score">${favorites[index]} ❤</p> </div> </li> `}) });
Şimdi uygulamayı yeniden yükleyin ve Ağ paneline bir kez daha göz atın.
Paketimizin boyutu yine yarıdan fazla azaldı.
Sonuç
Bu codelab'den yararlanarak bir projeyi analiz etme ve ve kullanılmayan veya gereksiz olanları kaldırmanın neden bu kadar yararlı olabileceği pakettir. Bu teknikle bir uygulamayı optimize etmeye başlamadan önce, bunun çok daha karmaşık olabileceğini ve uygulamalar.
Kullanılmayan kitaplıkları kaldırmak için yararlı bir araç setinin hangi kısımlarına hangi bölümlerin kullanılmadığını görebilirsiniz. Gizemli bir görünüm için herhangi bir yerde kullanılmadığını düşünüyorsanız bir adım geri çekilin ve üst düzey bağımlılıklar için gerekliliklerini öğrenebilirsiniz. Muhtemelen sürecin ve ayırmaktır.
Gereksiz kitaplıkları kaldırmak söz konusu olduğunda
karmaşıktır. Ekibinizle yakın temas hâlinde çalışmak ve projenizde
kod tabanının parçalarını basitleştirme potansiyeline sahiptir. moment
burada kaldırılıyor
her şey için en doğru seçenek bu gibi görünebilir
olması gereken saat dilimleri ve farklı yerel ayarlar olsaydı ne olurdu? Alternatif olarak:
daha karmaşık tarih manipülasyonları olsaydı ne olurdu? İşler
Tarihleri/saatleri ve moment
gibi kitaplıkları değiştirirken ve ayrıştırırken karmaşıktır
ve date-fns
bu işlemi önemli ölçüde basitleştirdi.
Her şeyden ödün vermek önemlidir ve değinmeye değip değmeyeceğine karar vermek de önemlidir. test etmek yerine özel bir çözümü kullanıma sunmanın karmaşıklığı ve çabası kitaplığını oluşturur.