Praktische Tipps zur Minimierung Ihrer JavaScript-Bundle-Größe

Kunstwerk: https://code-art.pictures/

Warum sich die Mühe machen?

Es mag heutzutage überraschend sein, aber der Internetverkehr ist in vielen Szenarien immer noch ein Problem. Mobilfunknetze verfügen oft über begrenzte Datentarife, die Akkus der Geräte sind nicht unbegrenzt und vor allem ist die Aufmerksamkeit des Benutzers beim Warten auf das Laden Ihrer Website begrenzt. Deshalb ist die Paketgröße immer noch wichtig. Hier sind sieben Tipps, die Sie berücksichtigen sollten.

1. Transpilieren Sie nicht auf ES5

Im Jahr 2020 pflegte ich eine Werbe-App für ein lokales soziales Netzwerk. Es handelte sich um eine typische React TypeScript-Webpack-Anwendung für ES5. Als Webpack 5 veröffentlicht wurde, entschied ich mich für ein Upgrade. Alles verlief reibungslos; Ich habe die Fehleranalyse und das Benutzerfeedback überwacht und es gab nichts Unerwartetes. Erst nach einer Woche entdeckte ich zufällig, dass mein Bundle Pfeilfunktionen enthielt – es war eine neue Webpack-Funktion.

Hier ist ein ausgezeichneter Artikel über den Zustand von ES5. Wichtige Erkenntnisse:

• Viele Bibliotheken enthalten bereits ES6-Code, was bedeutet, dass Bundles mit ihnen nicht ES5-kompatibel sind.
• Die meisten der weltweit beliebten Websites sind nicht ES5-kompatibel – Ihre Website benötigt dies möglicherweise auch nicht.
• Wenn Sie sicher sind, dass Sie weiterhin ES5-Kompatibilität benötigen, müssen Sie die Bibliotheken in Ihren Build-Prozess einbeziehen.

2. Kennen und nutzen Sie die modernen JavaScript-Sprachfunktionen

Hier sind einige Funktionen, mit denen Sie besseren und kompakteren Code schreiben können.

2.1. Generatoren

Generatoren sind eine effiziente Möglichkeit, verschachtelte Strukturen zu durchqueren:

type TreeNode<t> = {
    left?: TreeNode<t>
    value: T
    right?: TreeNode<t>
};

function* traverse<t>(root: TreeNode<t>): Generator<t> {
    if (root.left) yield* traverse(root.left)
    yield root.value
    if (root.right) yield* traverse(root.right)
}
</t></t></t></t></t></t>

2.2. Private Klassenfelder

Minifizierer wissen mit Sicherheit, dass diese Felder keine externe Verwendung haben können, auch nicht in exportierten Objekten, und es steht ihnen frei, ihre Namen zu kürzen.

Quelle

export class A {
  #myFancyStateObject
}

Paket

export class A{#t}

Das funktioniert natürlich nicht mit privaten TypeScript-Feldern, da das Wissen, dass sie privat sind, verschwindet, sobald tsc seine Arbeit erledigt hat.

2.3. Moderne APIs

Haben Sie schon von Promise.withResolvers() oder Map.groupBy() gehört? Diese APIs sind zum Zeitpunkt des Verfassens dieses Artikels noch nicht allgemein verfügbar, werden es aber bald sein. Nehmen Sie sich jetzt einen Moment Zeit, um sich mit ihnen vertraut zu machen, und seien Sie bereit, sie in ein paar Jahren zu übernehmen.

Tipp: So entdecken Sie neue JavaScript-APIs

Es gibt unzählige Blogs und Podcasts, aber ich finde, dass die besten „Newsletter“ neue .d.ts-Dateien im TypeScript-Repository sind. Öffnen Sie einfach zum Beispiel es2024.collection.d.ts und genießen Sie ?

3. Vermeiden Sie Codeduplizierung

Bemerken Sie das sich wiederholende Muster?

type TreeNode<t> = {
    left?: TreeNode<t>
    value: T
    right?: TreeNode<t>
};

function* traverse<t>(root: TreeNode<t>): Generator<t> {
    if (root.left) yield* traverse(root.left)
    yield root.value
    if (root.right) yield* traverse(root.right)
}
</t></t></t></t></t></t>

Wiederholter Code erhöht nicht nur die Paketgröße, sondern macht es auch schwieriger zu verstehen, was die einzelnen Teile bewirken. Dies führt häufig dazu, dass Entwickler neuen Code schreiben, anstatt vorhandene Dienstprogrammfunktionen zu identifizieren und wiederzuverwenden, was das Paket weiter aufbläht.

Es gibt bereits eine Fülle exzellenten Materials zu diesem Thema, daher empfehle ich, anstatt es noch einmal zu erzählen, einen Klassiker: Refactoring von Martin Fowler. Es deckt nicht nur einfache Beispiele wie das obige ab, sondern auch komplexe Fälle wie gekoppelte Hierarchien und wiederholte Designs.

Jetzt verbessern wir unser kleines Beispiel. Es scheint, dass die Klammer häufig verwendet wird, um Parameter auf Array-Indexbereiche zu beschränken, sodass wir eine Verknüpfung erstellen können:

export class A {
  #myFancyStateObject
}

Diese Änderung macht deutlich, dass n wahrscheinlich eine Ganzzahl sein soll, die derzeit nicht überprüft wird. Außerdem wird ein nicht behandelter Randfall hervorgehoben: leere Arrays. Durch diese kleine Deduplizierung haben wir auch zwei potenzielle Fehler entdeckt ?

4. Vermeiden Sie Overengineering

Ich erinnere mich nicht an die genaue Quelle dieses Sprichworts, aber ich denke, es ist genau richtig:

Overengineering bedeutet, ein Problem zu lösen, das Sie nicht haben.

In der Welt der Webentwicklung habe ich zwei Haupttypen von Overengineering beobachtet.

4.1. Überverallgemeinerung

Bedenken Sie diesen Code. Die Auffüllungen sind Vielfache von 4 Pixeln und die Hintergrundfarben sind Blautöne. Dies ist wahrscheinlich kein Zufall, und wenn ja, könnte dies auf eine mögliche Duplizierung hinweisen. Aber verfügen wir wirklich über genügend Informationen, um die generische Button-Komponente zu extrahieren, oder überdimensionieren wir?

CSS

export class A{#t}

JSX

const clamp = (min, val, max) =>
  Math.max(min, Math.min(val, max))
const x = clamp(0, v1, a.length - 1)
const y = clamp(0, v2, b.length - 1)
const z = clamp(0, v3, c.length - 1)

Dieser Rat steht etwas im Widerspruch zu „Vermeiden Sie Doppelarbeit.“ Eine übermäßige Deduplizierung von Code kann zu Overengineering führen. Wo ziehen Sie also die Grenze? Persönlich verwende ich die magische Zahl „3“: Sobald ich drei Stellen mit einem ähnlichen Muster sehe, ist es möglicherweise an der Zeit, die generische Komponente zu extrahieren.

Im Fall unserer blauen Schaltflächen wäre es meiner Meinung nach die beste Lösung, zumindest zum Auffüllen CSS-Variablen zu verwenden, anstatt eine neue Komponente zu erstellen.

4.2. Verwendung eines falschen Frameworks

Ja, ich spreche von dem, was wir lieben – Next.js, React, Vue und so weiter. Wenn Ihre App nicht viel Interaktivität auf der Ebene der DOM-Elemente beinhaltet, nicht dynamisch oder sehr einfach ist, ziehen Sie andere Optionen in Betracht:

• Statische Site-Generatoren – Sie können mit einigen kuratierten Listen beginnen.
  • Vorsicht: Einige von ihnen nutzen unter der Haube React oder andere Frameworks. Wenn Ihr Ziel die Paketminimierung ist, versuchen Sie etwas anderes.
• Content-Management-Systeme wie WordPress.
• Vanille – besonders nützlich in zwei Fällen:
  • Die App ist sehr einfach.
  • Die App manipuliert nicht viel DOM, sondern malt stattdessen beispielsweise etwas auf eine Leinwand. Ich habe genau ein Projekt wie dieses.

5. Vermeiden Sie veraltete TypeScript-Funktionen

Das aktuelle Ziel von TypeScript ist hauptsächlich die Typprüfung von JavaScript, aber das war nicht immer so. In den Tagen vor ES6 gab es viele Versuche, „besseres JavaScript“ zu entwickeln, und TypeScript bildete da keine Ausnahme. Einige Funktionen stammen aus diesen frühen Tagen.

5.1. Aufzählungen

Sie sind nicht nur schwierig richtig zu verwenden, sondern sie führen auch zu ziemlich ausführlichen Strukturen:

TypeScript

type TreeNode<t> = {
    left?: TreeNode<t>
    value: T
    right?: TreeNode<t>
};

function* traverse<t>(root: TreeNode<t>): Generator<t> {
    if (root.left) yield* traverse(root.left)
    yield root.value
    if (root.right) yield* traverse(root.right)
}
</t></t></t></t></t></t>

JavaScript

export class A {
  #myFancyStateObject
}

Das offizielle TypeScript-Handbuch empfiehlt die Verwendung einfacher Objekte anstelle von Aufzählungen. Sie können auch Gewerkschaftstypen in Betracht ziehen.

5.2. Namensräume

Namespaces waren eine Modullösung vor ESM. Sie erhöhen nicht nur die Bundle-Größe, sondern da Namespaces global sein sollen, wird es auch wirklich schwierig, Namenskonflikte in großen Projekten zu vermeiden.

TypeScript

export class A{#t}

JavaScript

const clamp = (min, val, max) =>
  Math.max(min, Math.min(val, max))
const x = clamp(0, v1, a.length - 1)
const y = clamp(0, v2, b.length - 1)
const z = clamp(0, v3, c.length - 1)

Verwenden Sie anstelle von Namespaces ES-Module.

Hinweis: Namespaces sind jedoch immer noch nützlich, um Typdefinitionen für globale Bibliotheken zu schreiben.

6. Vernachlässigen Sie kleine Optimierungen nicht

Mit jedem dieser kleinen Tricks können Sie mehrere bis Dutzende Bytes im Paket einsparen. Bei konsequenter Anwendung können sie ein sichtbares Ergebnis bringen.

6.1. Verwenden Sie wahrheitsgemäße/falsche Eigenschaften

Zum Beispiel ist eine leere Zeichenfolge falsch. Um zu überprüfen, ob es definiert und nicht leer ist, können Sie einfach Folgendes schreiben:

const clampToRange = (n, {length}) =>
  clamp(0, n, length - 1)
const x = clampToRange(v1, a)
// ...

6.2. Erlauben Sie manchmal nicht strikte Vergleiche

Ich glaube, dass die Verwendung von ==, um null in undefiniert umzuwandeln oder umgekehrt, völlig gerechtfertigt ist.

.btn-a {
    background-color: skyblue;
    padding: 4px;
}
.btn-b {
    background-color: deepskyblue;
    padding: 8px;
}

6.3. Verwenden Sie Nullish Coaleszenz, logisches ODER und Standardparameter, um Standardwerte zu ersetzen

<button classname="btn-a" onclick="{handleClick}">
    Show
</button>
// ...
<button classname="btn-b" onclick="{handleSubmit}">
    Submit
</button>

6.4. Verwenden Sie Pfeilfunktionen für Einzeiler

Stattdessen:

enum A {
  x, y
}

Schreiben Sie dies:

var A;
(function (A) {
    A[A["x"] = 0] = "x";
    A[A["y"] = 1] = "y";
})(A || (A = {}));

6.5. Verwenden Sie keine Klassen für sehr einfache Objekte

Stattdessen:

namespace A {
  export let x = 1
}

Schreiben Sie dies:

var A;
(function (A) {
    A.x = 1;
})(A || (A = {}));

Sie können das Objekt auch einfrieren, um seine Eigenschaften vor Änderungen zu schützen.

7. Überprüfen Sie die Pakete regelmäßig

Für jeden Bundler gibt es Tools zur Visualisierung seines Inhalts, z. B. Webpack-Bundle-Analyzer für Webpack und Vite-Bundle-Analyzer für Vite. Tools wie diese helfen Ihnen, häufige Probleme mit Ihrem Bundle zu identifizieren:

• Eine Bibliothek nimmt unverhältnismäßig viel Platz ein – vielleicht ist es Zeit für eine Migration oder ein Upgrade?
• Zwei ähnliche Bibliotheken werden in verschiedenen Teilen Ihres Projekts verwendet – können Sie nur eine konsolidieren und verwenden?
• Eine große Datei ist in Ihrem Bundle vorhanden, wird aber nur von einer Seite aufgerufen, die 0,5 % der Benutzer besuchen (z. B. ein Lizenztext) – vielleicht können Sie das Bundle mit dynamischem Import() partitionieren?

Zusätzlich zu diesen Tools ist es eine gute Idee, die Pakete gelegentlich manuell durchzulesen, um Unregelmäßigkeiten zu erkennen. Aufgrund einer TypeScript-Fehlkonfiguration finden Sie beispielsweise ES5-Helfer in einem ES6-Bundle oder CJS-Helfer in einem ESM-Projekt. Diese Probleme werden von automatisierten Tools möglicherweise nicht erkannt, können aber dennoch die Ladezeit verlängern und Sie möglicherweise Ihr wertvollstes Gut kosten – die Aufmerksamkeit des Benutzers.

---

Vielen Dank fürs Lesen. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonPraktische Tipps zur Minimierung Ihrer JavaScript-Bundle-Größe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!