So minimieren Sie JavaScript: Eine Schritt-für-Schritt-Anleitung für Anfänger

Inhaltsverzeichnis:

1. Warum JavaScript minimieren? #
2. Die Vorteile der JavaScript-Minifizierung #
3. Minimierung vs. Verschleierung #
4. Online-Tools zum Minimieren von JavaScript #
5. JavaScript mit anderen Tools und Diensten minimieren #

Warum JavaScript minimieren?

Wie ich bereits angedeutet habe, ist die Code-Minifizierung eine Möglichkeit, die Leistung und Geschwindigkeit Ihrer Webseiten zu verbessern. Um zu demonstrieren, wie die JavaScript-Minifizierung aussieht, werfen Sie einen Blick auf das folgende Codebeispiel, das eine gängige JavaScript-Debounce-Funktion ist:

 let doResizeResult = () => { console .log( window .innerWidth); } // main function let debounce = ( callback, delay ) => { let myTimeout; return () => { clearTimeout(myTimeout); myTimeout = setTimeout( () => { callback() }, delay); }; }; let doDebounce = debounce( () => doResizeResult(), 1000 ) window .addEventListener( 'resize' , () => doDebounce()); Codesprache: JavaScript ( javascript )

Der obige Code ist einfach zu lesen, hat korrekte Einzüge, enthält Leerzeichen zwischen Operatoren und doppelte Leerzeichen zwischen bestimmten Codezeilen. Es ist nicht erforderlich, JavaScript auf diese Weise zu schreiben, aber es hilft bei der Lesbarkeit. Dieses Beispiel enthält auch einen Kommentar innerhalb des Codes.

Wenn ich einen JavaScript-Minifier verwenden würde, um diesen Code zu minimieren, würde er ungefähr so ​​​​aussehen:

 let doResizeResult= () => { console .log( window .innerWidth)},debounce= ( e,d )=> { let n; return () => {clearTimeout(n),n=setTimeout( () => {e()},d)}},doDebounce=debounce( () => doResizeResult(), 1e3 ); window .addEventListener( "resize" ,()=>doDebounce()); Codesprache: JavaScript ( javascript )

Ich habe die leicht lesbare Version des Code-Snippets in einen Online-JavaScript-Minifier eingefügt (siehe Beispiele später). Der Minifier hat eine andere Version des exakt gleichen Codes generiert – nur dass der Code jetzt minimiert wird. Das bedeutet, dass unnötige Leerzeichen und Zeilenumbrüche entfernt werden, um sicherzustellen, dass der Code so klein wie möglich ist. In diesem Fall wurde auch der Codekommentar entfernt.

Bitte beachten Sie, dass Sie das JavaScript, das Sie bearbeiten und pflegen möchten, niemals minimieren würden. Dies wäre kontraproduktiv. Die JavaScript-Minifizierung ist für den Code gedacht, den Sie auf Ihre Produktionswebsite übertragen. Wenn Sie in einer Entwicklerumgebung an JavaScript arbeiten, würden Sie die vorminimierte Version des Codes intakt lassen.

Die Vorteile der JavaScript-Minifizierung

Um Ihnen eine Vorstellung davon zu geben, wie viel Dateigröße beim Minimieren eines Snippets wie dem obigen eingespart wird:

• Vor der Minimierung: 384 Bytes
• Nach Minimierung: 232 Bytes

Dies wäre nur für die Minimierung und beinhaltet keine anderen Formen der Komprimierung wie gzip. Dies verwendet auch keine Form der Minimierung, die die Größe von Variablennamen, Funktionsnamen und anderen Teilen des Codes reduziert. Stellen Sie sich nun vor, dass diese Art von Verbesserung an Hunderten von Codezeilen vorgenommen wird! Das ist eine große Steigerung der Leistung Ihrer App, allein durch einfache Minimierung.

Dies sollte ausreichend zeigen, warum Sie sich mit der Minimierung von JavaScript befassen sollten. Aber bevor ich zu den Tools komme, die Sie zum Minimieren von JavaScript verwenden können, werde ich kurz auf ein anderes verwandtes Thema eingehen.

Minimierung vs. Verschleierung

Das Minimieren von JavaScript ist nicht dasselbe wie die JavaScript-Verschleierung. Allerdings ist es wahr, dass die Minimierung Ihr JavaScript schwerer lesbar macht. Aber es ist nicht vollständig „verschleiert“ und es ist einfach, JavaScript-Code zu verschönern (dh „unminify“). JavaScript-Verschleierung sieht ganz anders aus.

Kehren wir zum gleichen Ausschnitt aus dem vorherigen Abschnitt zurück. So würde dieses Snippet aussehen, wenn ich es durch einen Online-JavaScript-Obfuscator laufen lasse:

 var _0xc3ef=[ "\x69\x6E\x6E\x65\x72\x57\x69\x64\x74\x68" , "\x6C\x6F\x67" , "\x72\x65\x73\x69\x7A\x65" , "\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72" ]; let doResizeResult= () => { console [_0xc3ef[ 1 ]]( window [_0xc3ef[ 0 ]])}; let debounce= ( _0xf855x3,_0xf855x4 )=> { let _0xf855x5; return () => {clearTimeout(_0xf855x5);_0xf855x5= setTimeout( () => {_0xf855x3()},_0xf855x4)}}; let doDebounce=debounce( () => { return doResizeResult()}, 1000 ); window [_0xc3ef[ 3 ]](_0xc3ef[ 2 ],()=>{ return doDebounce()}) Codesprache: JavaScript ( javascript )

Obwohl einige Teile des Codes noch intakt sind, können Sie sehen, dass der größte Teil des Codes völlig anders und nicht lesbar ist.

Der Zweck der JavaScript-Verschleierung besteht darin, anderen nicht zu erlauben, den Code zu „stehlen“, und ihn gleichzeitig zu minimieren. Dies ist jedoch ein ziemlich sinnloses Unterfangen, da der Code technisch „entschleiert“ werden kann. Außerdem sind Front-End-Technologien Teil der offenen Webplattform, sodass JavaScript-Code nur schwer urheberrechtlich geschützt werden kann.

Daher können Sie JavaScript allein minimieren; JavaScript-Verschleierung ist in den meisten Fällen übertrieben.

Online-Tools zum Minimieren von JavaScript

Nachdem ich nun die Grundlagen behandelt habe, warum Sie JavaScript minimieren sollten, und seine Vorteile, lassen Sie uns einige nützliche Online-Tools betrachten. Mit diesen können Sie regulären JavaScript-Code mit wenigen Klicks sofort in minimierten Code umwandeln.

Viele der aufgeführten Tools funktionieren ähnlich, unterscheiden sich jedoch darin, wie der Code hinzugefügt werden kann (z. B. per Upload, Direkteingabe usw.). Außerdem verfügen einige der Tools über Konfigurationsoptionen für bestimmte Arten der Minimierung, einschließlich Optionen zur Verschleierung.

Toptal JavaScript-Minifier

Mit diesem Online-Minifier-Service von Toptal können Sie Ihr JavaScript direkt auf der Seite minimieren. Sie haben auch die Möglichkeit, es durch eine POST-Anfrage mit ihrer API zu minimieren.

Das JavaScript-Minimierungstool von Digital Ocean

Das Minify-Tool von Digital Ocean bietet eine Reihe verschiedener Konfigurationseinstellungen, einschließlich der Möglichkeit, unbenutzten Code und verirrte console.log() Anweisungen zusammen mit der Minifizierung zu entfernen. Sie können auch aus drei Konfigurationsvoreinstellungen für eine schnellere Minimierung wählen.

Minimieren

Minify ist ein einfacher JavaScript-Minifier, der auch CSS minimiert. Sie können es direkt online mit dem Homepage-Tool oder als CLI-Tool verwenden, mit dem Sie mehrere Dateien minimieren und kombinieren können. Dieser enthält auch eine Testsuite.

Bundlejs

bundlejs unterscheidet sich von den anderen JavaScript-Minifizierungstools in dieser Liste. Mit diesem können Sie interaktiv testen, wie groß Ihre Paketgrößen sein werden, nachdem Sie alle Ihre Pakete kombiniert und minimiert haben. Sie können es als Minifier oder einfach als Bundle-Size-Checker verwenden und es verfügt über verschiedene Konfigurationsoptionen.

JSCompress

JSCompress ist ein Online-JavaScript-Minifier, der UglifyJS und babel-minify unter der Haube verwendet. Mit diesem Tool können Sie Ihr JavaScript kopieren und einfügen oder eine oder mehrere Dateien hochladen, um Dateien für die Minimierung und Komprimierung zu kombinieren.

JavaScript-Minifier von FreeFormatter.com

Mit diesem Online-Minify-Tool können Sie durch direktes Kopieren/Einfügen oder durch Hochladen von Dateien minimieren. Sie können den Kodierungstyp für Ihre Datei auswählen und dieser passt auch die Variablennamen im Code an, um sie für eine bessere Optimierung kleiner zu machen.

Minimieren Sie JS online

Ein einfaches Tool zum Minimieren von JavaScript per Kopieren/Einfügen. Dies ist so einfach wie diese Tools und es enthält auch ein paar Ein-Klick-Tests, mit denen Sie sehen können, wie bestimmte JavaScript-Bibliotheken minimiert werden.

JavaScript-Minifier von BeautifyTools

Dieser Online-Minifier minimiert Ihr JavaScript sofort und Sie haben die Möglichkeit, Ihren Code auf verschiedene Arten einzugeben. Sie können kopieren/einfügen, per URL laden oder eine lokale JavaScript-Datei laden.

JS-Minify

Mit diesem Tool können Sie durch direkte Eingabe minimieren oder eine JavaScript-Datei hochladen. Nützlicherweise haben Sie auch die Möglichkeit, verschiedene Kontrollkästchen zu aktivieren, um verschiedene Teile des Codes zu „verstümmeln“ (ähnlich wie bei der Verschleierung) und Kommentare und Originalzitate beizubehalten.

Minimieren Sie JavaScript mit anderen Tools und Diensten

Sobald das CMS oder Build-System Ihrer Website eingerichtet ist, müssen Sie in den meisten Fällen JavaScript nicht mehr manuell, sondern automatisch minimieren. Dies ist je nach Setup über Plugins und Build-Tools möglich.

Wenn Sie beispielsweise eine WordPress-Website betreiben, gibt es Plugins, die eine Reihe von Optionen bieten, darunter Datei-Caching, Komprimierung und natürlich CSS- und JavaScript-Minifizierung.

Wenn Sie eines der vielen verfügbaren Build-Tools wie Webpack, Parcel.js, esbuild, Snowpack usw. verwenden, kann die Minimierung automatisch durchgeführt werden. Ihr Entwicklungscode wird nicht minimiert, aber wann immer Sie bereit sind, Ihre Änderungen in die Produktion zu übertragen, wird Ihr neuer Code automatisch mit Ihren ausgewählten Funktionen erstellt, einschließlich der JavaScript-Minifizierung.

Ein beliebtes Tool, das Sie beim Minimieren von JavaScript als Teil eines Build-Prozesses verwenden können, ist das bereits erwähnte UglifyJS. Dies ist ein voll ausgestatteter Kompressor/Minifier, den viele Tools unter der Haube verwenden und den Sie auch selbst verwenden können.

Es gibt auch Content Delivery Networks (CDN) und verwandte Dienste, mit denen Sie Ihr JavaScript automatisch minimieren können, wenn es von Ihrer Website bereitgestellt wird. Dies ähnelt der On-the-Fly-Bildoptimierung.

Einer dieser Dienste ist JsDelivr. JsDelivr ist ein schnelles CDN, das für Open-Source-Projekte kostenlos und für die Bereitstellung von JavaScript-Inhalten von npm und GitHub optimiert ist. Wie in ihrer Dokumentation erklärt:

Wir werden zuerst versuchen, eine minimierte Version der Datei zu finden … (indem wir die Erweiterung entfernen und nach derselben Datei .min.js suchen). Wenn wir keinen finden, werden wir uns selbst minimieren.

Dies bietet eine starke Leistung durch die Bereitstellung selbst, zusammen mit einer Minimierung, falls erforderlich.

Zusammenfassung zum Minimieren von JavaScript

Ich hoffe, die oben vorgestellten Tools und Vorschläge helfen Ihnen zu verstehen, wie Sie JavaScript auf Ihren Websites und Apps minimieren und welche Vorteile es hat. Wie oben gezeigt, gibt es eine Reihe von Tools, mit denen Sie Ihr JavaScript minimieren können. Einige davon sind Online-Tools, die Sie interaktiv verwenden können. Andere sind Teil eines größeren Website-Build-Systems und verwenden manchmal ein CMS.

Was auch immer der Fall ist, die JavaScript-Minifizierung wird Ihren Benutzern zugute kommen, indem Inhalte bereitgestellt werden, die schneller geladen werden, was eine bessere allgemeine Benutzererfahrung ermöglicht.