14 Tools zum Reduzieren von Javascript

Javascript Minification ist eine Technik, die verdichtet Ihr Skript in einem viel kleineren Footprint. Sie verlieren die menschliche Lesbarkeit, sparen jedoch beträchtliche Bandbreite - letztendlich, Javascript ist für Ihren Browser und nicht für Ihre Benutzer gedacht.

Die meisten Produktionswebseiten verwenden die Javascript-Minifizierung, aber die Art und Weise, wie dies erreicht wird, variiert stark. Von einfachen Online-Konvertern über umfassendere GUI-Tools bis zu Befehlszeilenschnittstellen sind unsere Optionen sehr unterschiedlich. In diesem Artikel werden wir einen Blick darauf werfen wie Javascript Minification funktioniert, Wie können wir es in unseren Workflow integrieren und was die Vor- und Nachteile der Minimierung sind.

Wie funktioniert Minification?

Der beste Weg, um zu erfahren, was passiert, wenn Sie Ihren Code minimieren, ist ein Blick auf das UglifyJS Github-Repository. Dieses Skript wird in vielen Online-Konvertern sowie in GUI-Tools und Befehlszeilen-Tools wie Grunt verwendet. Hier sind einige der Transformationen, mit denen der Code kürzer wird:

Entfernt unnötigen Speicherplatz
Verkürzt Variablennamen, meistens auf einzelne Zeichen
Verbindet aufeinanderfolgende var-Deklarationen
Konvertiert Arrays nach Möglichkeit in Objekte
Optimiert if-Anweisungen
Berechnet einfache konstante Ausdrücke
usw.

Hier ein kurzes Beispiel, eine Funktion, die im Wesentlichen einen bestimmten Text ausschreibt.

 Funktion hallo (Text) document.write (Text);

Hallo ("Willkommen zum Artikel");

Mal sehen, was passiert, wenn wir dies minimieren. Beachten Sie das Entfernen von Leerzeichen und Einzug sowie die Verkürzung der Textvariablen.

Funktion hallo (e) document.write (e) hallo ("Willkommen zum Artikel")

Javascript Minification Tools

Die zur Minimierung von Javascript verwendeten Tools lassen sich grob in drei Gruppen einteilen: Online-Tools, GUI-Tools und Befehlszeilen-Tools.

Bei Online-Tools müssen Sie in der Regel Ihren Code einfügen und das Ergebnis sofort kopieren.
GUI-Tools enthalten häufig viel mehr Funktionen. JS Minification ist nur ein kleiner Teil dessen, was sie tun.
Kommandozeilen-Tools sind in der Regel auch umfassender und bieten Minification als Modul.

Online-Tools

javascript-minifier.com ist ein hübsch aussehendes Tool mit einer API
Online YUI Compressor ist ein leistungsfähigeres Tool, das den YUI-Kompressor verwendet, mit vielen Optionen und CSS-Minifizierungsfunktionen
jscompress.com ist ein No-Frills-Minifier, der aber die Arbeit erledigt
jsmini.com ist eine weitere einfache, aber vollständig nutzbare Option

Das Tolle an Online-Tools ist die Geschwindigkeit, mit der Sie mit ihnen arbeiten können. Komplexe GUI- und Befehlszeilen-Tools reduzieren sich schneller, aber Sie müssen ein Projekt einrichten, damit es ordnungsgemäß funktioniert. Der Nachteil dieser Tools ist, dass sie meistens bieten wenig bis keine Anpassung, zumindest im Vergleich zu Kommandozeilen-Tools.

GUI-Tools

Koala ist ein kostenloses Tool für LESS, SASS Compilation, JS Minification und vieles mehr
Prepros ist eine plattformübergreifende kostenpflichtige App, die Ihnen noch mehr Optionen bietet
Codekit ist meine App der Wahl. Es ist eine kostenpflichtige Mac-App, die Code-Kompilierung, Minification, Vorschauserver, Bower-Paketverwaltung und vieles mehr bietet
AjaxminGui ist ein kostenloses Windows-Tool zur Minimierung Ihres JS
UltraMinifier ist eine kostenlose App für OS X, die CSS und JS durch Ziehen und Ablegen minimiert
Kleiner ist ein OS X-Tool, das Dateien für Sie minimiert und verkettet

Ich habe hier zwei Arten von GUI-Apps erwähnt. Die einfachen One-Step-Minification-Apps ähneln den Online-Pendants. Sie sind extrem schnell zu verwenden, da Sie Dateien einfach per Drag & Drop in sie ziehen können, ohne dass ein Setup erforderlich ist. Das sagten sie bieten praktisch keine Anpassung.

Größere GUI-Tools (Prepros, Koala, Codekit) eignen sich hervorragend zum Verwalten von Projekten und bieten Ihnen ein bisschen mehr Optionen für die Komprimierung, aber sie tun dies brauche ein bisschen Setup. Eine schnelle JS-Minifizierung würde ungefähr 20 Sekunden dauern, was sehr viel ist, verglichen mit dem 2-Sekunden-Prozess von Online- oder einfachen GUI-Tools.

Auf der anderen Seite bieten sie Ihnen generell mehr Funktionen und Automatisierung. Ihre JS-Dateien werden bei jedem Speichern minimiert. Sie müssen sie nicht manuell minimieren. Wenn Sie etwas in Javascript entwickeln, ist dies definitiv der Weg.

Befehlszeilen-Tools

Minify ist für diejenigen, die JS von der Kommandozeile aus minimieren möchten, aber nichts Besonderes in Grunt oder Gulp einrichten möchten
Uglify.js, das wir zuvor erwähnt haben, ist auch als eigenständiges Befehlszeilentool verfügbar
Grunt hat eine Erweiterung für die Javascript-Minifizierung namens grunt-contrib-uglify
Gulp hat auch eine JS-Minifizierung mit Uglify.js durch gulp-uglify

Befehlszeilentools sind nicht nur für Linuxfreaks! Ich bin am Terminal nicht großartig, aber das Einrichten von Dingen wie Grunt und Gulp ist durch ihre großartige Dokumentation einfach. Das Beste an Befehlszeilen-Tools ist die enorme Flexibilität, die Sie von den Optionen bis zur Ausgabe haben.

Auf der anderen Seite gibt es eine etwas von einer Lernkurve. Gewöhnung an die Kommandozeile nimmt einige (nicht viel) Übung, die Sie als einschränkend empfinden bevor Sie anfangen, die Vorteile zu genießen.

Überblick

Wenn Sie noch nicht mit Webentwicklung vertraut sind, würde ich eines der ersten drei GUI-Tools empfehlen. Sie helfen Ihnen bei der Verwaltung Ihrer Projekte im Allgemeinen und bieten weit mehr als nur die JS-Minifizierung.

Wenn Sie ein erfahrener Profi sind, sollten Sie wahrscheinlich nachsehen Grunzen oder Schlucken da diese die meiste Kontrolle über Automatisierungsaufgaben bieten. Wenn Sie ein Skript schnell minimieren müssen ohne ein Projekt anzulegen, Die Befehlszeilentools sparen viel Zeit.

Jede Gruppe von Tools hat ihre Vor- und Nachteile, und in Wahrheit werden Sie wahrscheinlich eines von beiden irgendwann verwenden. Denken Sie daran, dass Sie in einer Produktionsumgebung immer Javascript und CSS minimieren sollten!