Get best of the week

Stoppen Sie den Import ganzer JavaScript-Pakete

Wie oft haben Sie jemals ein ganzes JavaScript-Paket in ein Projekt importiert, als Sie nur sehr wenige Funktionen dieses Pakets verwenden mussten? Sie werden sich wahrscheinlich an viele solcher Fälle erinnern können.

Ein anschauliches Beispiel für ein Paket, das vollständig importiert wird und nur einige seiner Funktionen benötigt, kann als Lodash- Bibliothek bezeichnet werden . Wenn Sie noch nichts von dieser Bibliothek gehört haben, sollten Sie sich deren Dokumentation ansehen. Insbesondere können Sie auf der Projektwebsite feststellen, dass Lodash die JavaScript-Entwicklung vereinfacht, indem es die Aufgabe übernimmt, mit Arrays, Zahlen, Objekten und dergleichen zu arbeiten.



Die Lodash-Bibliothek enthält über 200 Funktionen. Dies deutet darauf hin, dass sie dem Programmierer tatsächlich bei der Lösung vieler Probleme helfen kann. Es kann jedoch vorkommen, dass beim Importieren der gesamten Bibliothek nur 4-5 Funktionen aufgerufen werden. Dies führt uns zu der Frage, ob es ratsam ist, das gesamte Paket in einer Situation zu importieren, in der nur 2-3% seiner Funktionen genutzt werden. Lassen Sie uns darüber nachdenken, wie wir damit umgehen sollen.

Lodash bekommen Funktion


Eine meiner Lieblingsfunktionen der Lodash-Bibliothek ist die Funktion get. Sie können den sicheren Zugriff auf verschachtelte Objekte organisieren und die Verwendung von Standardwerten unterstützen.

Hier ist ein Beispiel für die Verwendung dieser Funktion:

const _ = require('lodash');

let employee1 = {
  name : "Jon",
  address : {
    street : "North Avenue",
    area : "DAC",
    zip : "87344",
    contact : [ 12444554, 9384847 ]
  },
  designation : "Manager"
};

let employee2 = {
  name : "Jake",
  designation : "Senior Manager"
};

function getHomeContact(employee) {
  return employee.address.contact;
}

getHomeContact(employee1); // [12444554, 9384847]
getHomeContact(employee2); // Uncaught TypeError: Cannot read property 'contact' of undefined

function getHomeContactWithLodash(employee) {
  return  _.get(employee, "address.contact", []);
}

getHomeContactWithLodash(employee1); // [12444554, 9384847]
getHomeContactWithLodash(employee2); // []

Mit dieser Funktion können Sie den Code viel sauberer als zuvor gestalten. Dies hilft, Fehler zu vermeiden, da die Funktion nicht zurückgegeben wird, wenn ein leeres Array erwartet wird null. Dank dieser Funktion können Sie versehentlich keine Methode mapfür ein leeres Array aufrufen . Es schützt vor anderen Problemen.

Lassen Sie uns einen Blick darauf werfen, wie sich die Aufnahme der Lodash-Bibliothek in das Projekt, wenn nur die Funktion verwendet werden soll, auf die Größe des Bundles auswirkt get. Die Experimente werden mit einem React-Projekt durchgeführt. Die Größe des Bundles wird vor dem Importieren der Bibliothek und nach verschiedenen Optionen zum Verbinden mit dem Projekt analysiert.

Projektgröße vor dem Importieren der Bibliothek


Wir analysieren die Größe der Projektdateien, bevor wir die Bibliothek importieren.


Dateigröße vor Verwendung von Lodash

Lassen Sie uns nun die Konsequenzen verschiedener Möglichkeiten zum Importieren einer Bibliothek in ein Projekt untersuchen.

Projektgröße nach Verwendung verschiedener Methoden zum Importieren von Bibliotheken


▍1. Traditioneller Import


Hier geht es darum, die Bibliothek auf eine der folgenden traditionellen Arten zu importieren.

Der Erste:

import _ from ‘lodash’;

Zweite:

const _ = require('lodash');

Hier erfahren Sie, wie sich dies auf die endgültige Größe der Projektdateien auswirkt.


Ändern der Größe von Projektdateien beim Importieren eines gesamten Pakets

▍2. ES6-Import


Auch hier haben wir zwei Möglichkeiten.

Der Erste:

import { get } from 'lodash';

Zweite:

const { get } = require('lodash');

Lassen Sie uns einen Blick auf die Auswirkungen solcher Importe auf die Größe von Projektdateien werfen.


Dateigrößen beim Importieren der Funktion get mithilfe der destruktiven Zuweisung

Wie Sie sehen, führte die Verwendung der beiden oben genannten Ansätze zu einer Erhöhung der Dateigrößen um ca. 23 KB. Dies ist ein sehr deutlicher Anstieg, insbesondere angesichts der Tatsache, dass es sich um die Verwendung einer einzelnen Funktion aus der Bibliothek handelt, die mehr als 200 Funktionen umfasst. Infolgedessen stellt sich heraus, dass die Größe des Bundles so stark zugenommen hat, wie man es erwarten würde, wenn alle diese 200 Funktionen im Projekt verwendet würden.

Vielleicht sind 23 Kb kein so hoher Preis für die Nutzung der einzig notwendigen Funktion? Nein, das ist zu viel. 

Gibt es eine Möglichkeit, nur das zu importieren, was Sie in ein Projekt benötigen? Ja, so gibt es.

Lassen Sie uns den Ordner analysieren, in dem die Lodash-Materialien gespeichert sind.

Gehen Sie dazu einfach den Weg entlang node_modules/lodash. In diesem Ordner finden Sie viele Dateien, in denen der Code der einzelnen Funktionen gespeichert ist. Unter diesen ist es leicht, die Datei zu finden, get.jsin der sich der Code der Funktion befindet, an der wir interessiert sind get. Wenn wir nur eine Funktion benötigen, reicht es getaus, nur diese Datei in das Projekt zu importieren. Dies führt uns zur dritten Importmethode.

▍3. Importieren Sie die Datei get.js aus Lodash


Auch hier stehen zwei Methoden zur Verfügung.

Der Erste:

import get from 'lodash/get';

Zweite:

const get = require('lodash/get');

Sehen Sie sich die Größenänderung des Bundles an.


Dateigrößen beim Importieren der Datei get.js

Es ist ersichtlich, dass wir aufgrund der Tatsache, dass wir die Datei nur in das Projekt importiert habenget.js, mehr als 20 KB unnötigen Code entfernen konnten, der bei Verwendung anderer Methoden in das Bundle gelangt. Wir sprechen aber nur von einem Paket. Ein typisches JavaScript-Projekt weist viel mehr Abhängigkeiten auf. Stellen Sie sich vor, wie sich ein vorsichtiger Ansatz beim Importieren von Paketen und die ständige Kontrolle der Bundle-Größen auf ein Server- oder Client-Projekt auswirken können.

Unterstützen alle Pakete einen selektiven Importansatz?


Überhaupt nicht. Dies hängt vollständig von der Organisation der Paketdateien ab. Glücklicherweise sind die meisten der ziemlich großen, beliebten Pakete so strukturiert, dass es bei der Arbeit mit ihnen einfach ist, den selektiven Import ihrer individuellen Funktionen zu organisieren.

Wie mache ich dasselbe, wenn ich mit anderen Bibliotheken arbeite?


Das Entfernen von nicht verwendetem Code wird als Baumschütteln bezeichnet. Wenn Sie beispielsweise den Baum der Ant Design-Bibliothek „schütteln“ müssen, suchen Sie im Internet nach den Worten „Ameisenbaum schütteln“. Möglicherweise finden Sie eine Diskussion zu diesem Thema auf StackOverflow oder auf GitHub. Nachdem Sie eine solche Diskussion gefunden haben - schauen Sie sie durch -, ist es durchaus möglich, dass jemand die Aufgabe bereits vor Ihnen gelöst hat.

Ein anderer Weg, um unnötigen Code loszuwerden, erfordert etwas mehr Aufwand. Sie müssen in den Paketordner gehen node_modulesund eine Code-Analyse durchführen. Insbesondere sollten Sie sich für die Struktur des Projekts interessieren und herausfinden, ob es in kleine Module unterteilt ist, die unabhängig voneinander in das Projekt importiert werden können.

Importieren Sie ein Optimierungsbeispiel mit dem antd-Paket


Vor:

import { Menu} from 'antd';

Nach:

import Menu from 'antd/es/menu';
import 'antd/es/menu/style/css';

Importieren Sie ein Optimierungsbeispiel mit dem Material-UI-Paket


Vor:

import { Button } from '@material-ui/core';

Nach:

import Button from '@material-ui/core/Button';

Importieren Sie ein Optimierungsbeispiel mit dem Moment-Paket


Die Optimierung des Bibliotheksimportmoments sieht etwas komplizierter aus. Sehen Sie sich daher bei Bedarf die Aufgabe an , die ich im Task-Tracker dieser Bibliothek erstellt habe.

Zusammenfassung


Sie können selbst sicherstellen, dass viel unnötiger Code in Ihre Projekte gelangt. Sie können dieses Problem lösen, indem Sie sorgfältig vergleichen, was Sie importieren und was Sie verwenden. Auf diese Weise können Sie beispielsweise die Ladezeit Ihrer Websites verkürzen. Daher wird empfohlen, die Größe der Projektpakete sorgfältig zu überwachen und den Abhängigkeitsimport zu optimieren.

Und wie haben Sie in Ihren JavaScript-Projekten Schwierigkeiten, unnötigen Code zu importieren?

More articles:


All Articles