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

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

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

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!