Kullanılmayan kodu kaldırın

Houssein Djirdeh

Bu codelab'i takip etmek için bu Glitch'i ikinci bir sekmede açın.

Not: Bu codelab'de Chrome Geliştirici Araçları kullanılır. Bilgisayarınızda yoksa Chrome'u indirin.

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

Not: Bu uygulamada webpack kullanıldığından, kodda yapılan değişiklikler yeni bir derlemeyi tetikler. Bu işlem birkaç saniye sürebilir. İşlem tamamlandıktan sonra, yaptığınız değişikliklerin uygulamaya yansıdığını görürsünüz.

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. 🐈

1. Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
2. Ağ sekmesini tıklayın.
3. Önbelleği devre dışı bırak onay kutusunu seçin.
4. 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 olun Filter 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.