Nicht verwendeten Code entfernen

Houssein Djirdeh

Öffne diesen Glitch in einem zweiten Tab, um dem Codelab zu folgen.

Hinweis : In diesem Codelab werden die Chrome-Entwicklertools verwendet. Laden Sie Chrome herunter, falls Sie dies noch nicht getan haben.

In diesem Codelab können Sie die Leistung der folgenden Anwendung verbessern, indem Sie und entfernen Sie alle ungenutzten und unnötigen Abhängigkeiten.

Messen

Hinweis : Da Webpack in dieser Anwendung verwendet wird, lösen alle Änderungen am Code einen neuen Build aus. Dies kann einige Sekunden dauern. Sobald der Vorgang abgeschlossen ist, sollten Ihre Änderungen in der Anwendung angezeigt werden.

Es empfiehlt sich immer, die Leistung einer Website zuerst zu messen, das Hinzufügen von Optimierungen.

• Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild

Klicken Sie auf Ihr Lieblingskätzchen! Firebase Realtime Database ist die in dieser Anwendung verwendet wird. Deshalb wird der Wert in Echtzeit aktualisiert mit allen anderen Personen synchronisiert, die die Anwendung nutzen. 🐈

1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
2. Klicken Sie auf den Tab Netzwerk.
3. Klicken Sie das Kästchen Cache deaktivieren an.
4. Aktualisieren Sie die App.

Fast 1 MB JavaScript wird geliefert, um diese einfache Anwendung zu laden!

Sehen Sie sich die Projektwarnungen in den Entwicklertools an.

• Klicken Sie auf den Tab Console.
• Achten Sie darauf, dass Warnings im Drop-down-Menü „Ebenen“ neben der Option Filter-Eingabe.

• Sehen Sie sich die angezeigte Warnung an.

Firebase, eine der Bibliotheken, die in dieser Anwendung verwendet wird, mit einer Warnung an die Entwickler, dass sie seine gesamtes Paket, sondern nur die verwendeten Komponenten. Mit anderen Worten: Es gibt nicht verwendete Bibliotheken, die in dieser Anwendung entfernt werden können, damit sie geladen wird schneller.

Es gibt auch Fälle, in denen eine bestimmte Bibliothek verwendet wird, eine einfachere Alternative. Das Entfernen nicht benötigter Bibliotheken die wir uns später in dieser Anleitung ansehen werden.

Gruppierung analysieren

In der Anwendung gibt es zwei Hauptabhängigkeiten:

• Firebase: eine Plattform mit einer Reihe von nützliche Dienste für iOS, Android oder Web-Apps. Hier ist Echtzeit Datenbank wird verwendet, um die Daten für jedes Kätzchen in Echtzeit zu speichern und zu synchronisieren.
• Moment.js: Eine Dienstprogrammbibliothek, die das Erstellen von Daten in JavaScript verarbeiten können. Das Geburtsdatum jedes Kätzchens wird im Firebase-Datenbank und moment wird verwendet, um das Alter in Wochen zu berechnen.

Wie können nur zwei Abhängigkeiten zu einer Paketgröße von fast 1 MB beitragen? Nun, einer der Gründe ist, dass jede Abhängigkeit ihre eigene Abhängigkeiten, sodass es weitaus mehr als zwei gibt, wenn jede Tiefe Abhängigkeitsstruktur berücksichtigt wird. Es ist leicht, dass eine Anwendung groß wird. wenn viele Abhängigkeiten enthalten sind.

Analysieren Sie den Bundler, um eine bessere Vorstellung davon zu bekommen, was los ist. Es gibt eine Reihe von verschiedene von der Community entwickelte Tools, die dabei helfen können, z. B. webpack-bundle-analyzer

Das Paket für dieses Tool ist bereits in der App als devDependency enthalten.

"devDependencies": {
  //...
  "webpack-bundle-analyzer": "^2.13.1"
},

Das bedeutet, dass er direkt in der Webpack-Konfigurationsdatei verwendet werden kann. Importieren Sie sie ganz am Anfang von webpack.config.js:

const path = require("path");

//...
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

Fügen Sie es jetzt als Plug-in ganz am Ende der Datei im Array plugins hinzu:

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
};

Wenn die Anwendung neu geladen wird, sollten Sie eine Visualisierung des gesamten Bundle statt der App selbst.

Nicht so niedlich wie ein paar Kätzchen ####, aber trotzdem unglaublich hilfreich. Wenn du den Mauszeiger auf eines der Pakete bewegst, wird seine Größe in drei verschiedene Möglichkeiten:

Statistikgröße	Größe vor jeder Komprimierung oder Komprimierung.
Geparste Größe	Größe des tatsächlichen Pakets innerhalb des Bundles, nachdem es kompiliert wurde. Version 4 des Webpacks, das in dieser Anwendung verwendet wird, komprimiert die automatisch kompiliert. Daher ist dieser Wert kleiner als die Statistik. Größe.
Mit gzip komprimierte Größe	Größe des Pakets, nachdem es mit GZIP-Codierung komprimiert wurde. Dieses wird in einem separaten Leitfaden behandelt.

Mit dem Webpack-Bundle-Analysetool ist es einfacher, nicht verwendete oder Pakete, die einen großen Teil des Bundles ausmachen.

Nicht verwendete Pakete entfernen

Die Visualisierung zeigt, dass das firebase-Paket aus viel weiteren Elementen besteht. als nur eine Datenbank. Es enthält zusätzliche Pakete, z. B.:

• firestore
• auth
• storage
• messaging
• functions

All dies sind tolle Dienste von Firebase (und beziehen sich auf die Dokumentation aber keines davon wird in der Anwendung verwendet. keinen Grund, sie alle zu importieren.

Machen Sie die Änderungen in webpack.config.js rückgängig, damit die Anwendung wieder angezeigt wird:

• Entfernen Sie BundleAnalyzerPlugin aus der Liste der Plug-ins:

plugins: [
  //...
  new BundleAnalyzerPlugin()
];

• Und entfernen Sie jetzt den nicht verwendeten Import am Anfang der Datei:

const path = require("path");

//...
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Die Anwendung sollte jetzt normal geladen werden. Ändern Sie src/index.js, um die Firebase-Importe.

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

Wenn die App jetzt neu geladen wird, wird die Entwicklertools-Warnung nicht mehr angezeigt. Öffnen des Auch im Bereich Netzwerk in den Entwicklertools wurde die reduzierte Paketgröße gut verkleinert:

Mehr als die Hälfte der gebündelten Größe wurde entfernt. Firebase bietet viele verschiedene und gibt Entwicklern die Möglichkeit, nur diejenigen einzubinden, die tatsächlich erforderlich. In dieser Anwendung wurde nur firebase/database zum Speichern und Synchronisieren verwendet alle Daten. Den Import firebase/app, mit dem die API-Oberfläche für der verschiedenen Dienste, immer erforderlich.

Viele andere beliebte Bibliotheken wie lodash ermöglichen es Entwicklern auch, selektiv verschiedene Teile ihrer Pakete importieren. Ohne viel Arbeit Bibliotheksimporte in einer Anwendung so aktualisieren, dass sie nur das enthalten, was verwendet wird zu erheblichen Leistungsverbesserungen führen.

Obwohl die Bundle-Größe erheblich reduziert wurde, gibt es noch weitere zu erledigen. 😈

Nicht benötigte Pakete entfernen

Im Gegensatz zu Firebase können Teile der moment-Bibliothek nicht auf folgende Weise importiert werden: aber vielleicht ganz entfernt werden?

Der Geburtstag jedes süßen Kätzchens wird im Unix-Format (Millisekunden) gespeichert. der Firebase-Datenbank.

Dies ist der Zeitstempel eines bestimmten Datums und einer Uhrzeit, dargestellt durch die Anzahl der Millisekunden, die seit dem 1. Januar 1970 um 00:00 Uhr UTC vergangen sind Wenn die aktuelle Datum und Uhrzeit können im gleichen Format berechnet werden. Mit dieser kleinen Funktion wie das Alter jedes Kätzchens in Wochen festgelegt werden kann.

Wie immer solltest du beim Lesen und Einfügen die Daten nicht kopieren und einfügen. Beginn moment wird aus den Importen in src/index.js entfernt.

import firebase from 'firebase/app';
import 'firebase/database';
import * as moment from 'moment';

Es gibt einen Firebase-Ereignis-Listener, der Wertänderungen in unserer Datenbank verarbeitet:

favoritesRef.on("value", (snapshot) => { ... })

Fügen Sie darüber hinaus eine kleine Funktion hinzu, um die Anzahl der Wochen angegebenes Datum:

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);
}

Bei dieser Funktion wird die Differenz in Millisekunden zwischen dem aktuellen Datum und Uhrzeit (new Date).getTime() und Geburtsdatum (das Argument birthDate, bereits in Millisekunden) berechnet und durch die Anzahl der Millisekunden in einer Woche.

Schließlich können alle Instanzen von moment im Event-Listener entfernt werden, indem Nutzen Sie stattdessen diese Funktion:

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>
    `})
});

Aktualisieren Sie nun die Anwendung und sehen Sie sich noch einmal den Bereich Netzwerk an.

Die Größe unseres Sets hat sich wieder um mehr als die Hälfte reduziert.

Fazit

Mit diesem Codelab sollten Sie ein gutes Verständnis dafür haben, wie Sie und warum es so nützlich sein kann, nicht verwendete Pakete. Bevor Sie eine Anwendung mit dieser Technik optimieren, ist wichtig zu wissen, dass dies in größeren Projekten erheblich komplexer sein kann, Apps.

Wenn Sie nicht verwendete Bibliotheken entfernen, versuchen Sie herauszufinden, welche Teile einer Produktpaket verwendet werden und welche Teile nicht. Für eine geheimnisvolle das scheinbar nirgends verwendet wird, gehen Sie einen Schritt zurück und sehen Sie nach, welche Abhängigkeiten auf oberster Ebene sie benötigen. Versuchen Sie, einen Weg zu finden, sie voneinander zu entkoppeln.

Beim Entfernen nicht benötigter Bibliotheken kann der Aufwand etwas komplizierter sein. kompliziert. Es ist wichtig, eng mit Ihrem Team zusammenzuarbeiten und zu prüfen, Teile der Codebasis zu vereinfachen. moment werden hier entfernt Es scheint so, als wäre es jedes Mal richtig zu machen, aber was ist wenn es Zeitzonen und verschiedene Sprachen gibt? Oder Was wäre, wenn es kompliziertere Datumsmanipulationen gäbe? Die Situation kann sehr Daten/Uhrzeiten zu ändern und zu parsen, sowie Bibliotheken wie moment zu verwenden. und date-fns vereinfachen dies erheblich.

Alles ist ein Kompromiss und es ist wichtig, abzuwägen, ob es sich überhaupt eine benutzerdefinierte Lösung bereitzustellen, anstatt sich auf eine Drittanbieter-Bibliothek.