Was ist Tree Shaking in JavaScript?

Was ist Tree Shaking?

Wenn Sie ein erfahrener JavaScript-Entwickler sind, haben Sie vielleicht schon von Tree Shaking gehört. Das Entfernen nicht verwendeten Codes aus einer Anwendung ist eine gängige Technik und entfernt auch nicht verwendete Importe aus der Anwendung. Hier wurde der Begriff „Tree Shaking“ eingeführt, indem der Baum geschüttelt wird, unnötige Codezweige entfernt werden und der erforderliche Code im endgültigen Paket verbleibt.

Grundsätzlich wird Tree Dithering verwendet, um ungültigen oder nicht verwendeten Code zu entfernen.

Warum brauchen wir Tree Shaking?

Wie wir im obigen Teil des Tutorials gesehen haben, wird Tree Shaking verwendet, um nicht verwendeten Code aus dem Anwendungspaket zu entfernen. Der Hauptgrund für die Verwendung von Tree Shaking besteht darin, die Größe des JavaScript-Pakets zu reduzieren, das wir an den Browser des Benutzers liefern. Wenn die Paketgröße kleiner ist, wird es schneller im Browser geladen. Darüber hinaus sind weniger Daten erforderlich, um das Bundle in einem Webbrowser herunterzuladen, was die Leistung der Anwendung verbessert.

Insbesondere die Tree-Shaking-Technologie ist in der Webentwicklung sehr wichtig, wenn Websites entwickelt werden, die auf großen dynamischen Daten basieren. Wenn Ihre Webanwendung sehr groß ist, aber statische Webseiten enthält, ist kein Tree-Shaking erforderlich. Aber selbst wenn Ihre Anwendung klein ist und viele dynamische Daten lädt, ist Tree-Shaking erforderlich, um den zusätzlichen Code zu entfernen.

Wie funktioniert Tree Shaking?

In diesem Abschnitt erfahren wir, wie Tree Shaking in der Echtzeitentwicklung funktioniert.

Lassen Sie uns das Baumschütteln anhand eines einfachen Beispiels verstehen.

Hier haben wir drei verschiedene Dateien erstellt und den Dateien basierend auf den Dateinamen unterschiedliche JavaScript-Funktionen hinzugefügt.

Dateiname – sum.js

export function sum() {
   let array = [1, 2, 3, 4, 5];
   return array.reduce((a, b) => a + b, 0);
}

Dateiname – Factorial.js

export function factorial(n) {
   if (n === 0) {
      return 1;
   }
   return n * factorial(n - 1);
}

Dateiname-multiply.js

export function multiply(a, b) {
   return a * b;
}

Dateiname – index.js

import { sum } from './sum.js';
import { factorial } from './factorial.js';
import { multiply } from './multiply.js';
console.log(sum(2, 3));

Im obigen Beispiel haben wir die Summen-, Fakultäts- und Multiplikationsfunktionen aus verschiedenen Dateien exportiert. Danach haben wir alle drei Funktionen in die Datei index.js importiert. Hier haben wir nur die Funktion sum() verwendet, nicht jedoch die Funktionen Factorial() oder multiply(). Daher haben wir einen ungenutzten Import in der Datei index.js und müssen ihn entfernen.

In ES5 verwenden wir „require()“, um Funktionen oder Module aus jeder anderen JavaScript-Datei zu importieren. Daher können wir Module wie unten gezeigt bedingt importieren.

let isSumRequire = true;
var sum;
var multiply;
if (isSumRequire) {
   sum = require('./sum');
} else {
   multiply = require('./multiply');
}

Hier importieren wir je nach Bedingung das Modul, damit es entsprechend der Anforderung geladen wird.

Aber in ES6 können wir Module nicht bedingt importieren, wie unten gezeigt.

let isSumRequire = true;
if (isSumRequire) {
   import sum from './sum';
} else {
   import multiply from './multiply';
}

Der obige bedingte Importcode funktioniert nicht. Daher müssen wir einen JavaScript-Bundler verwenden.

Wie verwende ich Bundler zum Baumschütteln?

Wie wir im obigen Abschnitt gesehen haben, können wir in ES6 keine bedingten Importe verwenden. Daher müssen wir Packager wie Webpack, Rollup, Parcel usw. verwenden.

Zuerst müssen wir den Bundler für das Baumrütteln konfigurieren. Dazu müssen Sie den Modus auf „Produktion“ einstellen und Optimierungseinstellungen hinzufügen, um das Baumrütteln zu ermöglichen.

Im Webpack können Sie beispielsweise den folgenden Code verwenden.

module.exports = {
   mode: 'production',
   optimization: {
      usedExports: true,
   },
   // other configuration settings...
};

Danach müssen Benutzer das Modul im ES6-Format importieren und sicherstellen, dass die Methode „require()“ nicht zum Importieren verwendet wird.

Auf diese Weise können Entwickler mithilfe von Bundlern das Tree-Shaking in JavaScript aktivieren, was dazu beiträgt, die Leistung von Anwendungen zu verbessern, indem die Ladezeiten in Webbrowsern verkürzt werden.

Das obige ist der detaillierte Inhalt vonWas ist Tree Shaking in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!