In Front-End-Projekten kann die Komprimierung der Größe von JavaScript-Dateien die Ladegeschwindigkeit und Leistung von Webseiten verbessern. Hier sind einige gängige Methoden zum Komprimieren der JavaScript-Dateigröße in Front-End-Projekten:
-
Komprimierungstools verwenden: Verwenden Sie spezielle Komprimierungstools, um JavaScript-Code automatisch zu komprimieren. Zu den häufig verwendeten Tools gehören UglifyJS, Terser, Closure Compiler usw. Diese Tools können Kommentare, Leerzeichen und unnötige Zeichen entfernen und eine Codeoptimierung durchführen, um die Dateigröße zu reduzieren.
-
Variablen- und Funktionsnamen verschleiern: Sie können die Dateigröße reduzieren, indem Sie Variablen- und Funktionsnamen durch kürzere, bedeutungslose Namen ersetzen. Diese Technik wird als Verschleierung von Variablen- und Funktionsnamen bezeichnet. Verschleierungstools wie UglifyJS und Terser können dies automatisch tun.
-
Entfernen Sie unnötigen Code: Überprüfen Sie Ihre JavaScript-Dateien auf Codeblöcke, Funktionen oder Variablen, die nicht mehr verwendet werden. Durch das Entfernen unnötigen Codes kann die Dateigröße verringert und die Leistung verbessert werden.
-
Nutzen Sie die modulare Entwicklung: Nutzen Sie die modulare Entwicklung, um den Code in mehrere Module aufzuteilen, die jeweils nur die erforderliche Funktionalität enthalten. Dadurch wird vermieden, dass die gesamte JavaScript-Datei in die Seite geladen wird, und es werden nur die erforderlichen Module geladen, wodurch die Dateigröße reduziert wird.
-
Verwenden Sie komprimierte Versionen von Bibliotheken von Drittanbietern: Wenn im Projekt Bibliotheken von Drittanbietern verwendet werden, stellen diese Bibliotheken normalerweise komprimierte Versionen von Dateien bereit. Verwenden Sie komprimierte Versionen von Bibliotheken von Drittanbietern, um die Dateigröße zu reduzieren.
-
Vermeiden Sie doppelten Code: Überprüfen Sie Ihren Code auf doppelte Blöcke und extrahieren Sie diese in wiederverwendbare Funktionen oder Module. Dies reduziert die Dateigröße und verbessert die Wartbarkeit des Codes.
-
GZIP-Komprimierung aktivieren: Durch das Einschalten der GZIP-Komprimierung auf der Serverseite kann die Größe der übertragenen Dateien verringert werden. Wenn der Browser eine JavaScript-Datei anfordert, komprimiert der Server die Datei und sendet sie dann an den Browser. Der Browser dekomprimiert sie und führt sie aus.
-
Verwenden Sie dynamische Importe: Bei großen JavaScript-Dateien können Sie dynamische Importe verwenden, um die Dateien langsam zu laden. Dies kann die Größe der ursprünglich geladenen Datei reduzieren und die Ladegeschwindigkeit der Seite verbessern.
Eine detailliertere Operation
- Entfernen Sie zusätzliche Zeichen, z. B. Leerzeichen, Zeilenumbrüche, Kommentare
- Komprimieren Sie Variablennamen, Funktionsnamen und Attributnamen
- Verwenden Sie einfachere Ausdrücke, z. B. zusammengeführte Deklarationen, boolesche Vereinfachung
- terser oder uglify und das beliebte komprimierte und verschleierte SWC, geschrieben in Rust.
- gzip- oder brotli-Komprimierung, aktiviert am Gateway (nginx)
- Verwenden Sie webpack-bundle-analyzer, um das Verpackungsvolumen zu analysieren und Bibliotheken zu ersetzen, die größere Volumina belegen, wie z. B. moment -> dayjs
- Verwenden Sie eine Bibliothek, die Tree-Shaking unterstützt, um nicht referenzierte Bibliotheken oder Funktionen zu löschen, z. B. lodash -> lodash/es
- Importieren Sie für Bibliotheken, die nicht im Tree-Shake-Modus ausgeführt werden können, Module nach Bedarf, z. B. mit dem Import-Button aus „antd/lib/Button“. Dies kann automatisch durch das handschriftliche Babel-Plugin erfolgen, wird jedoch nicht empfohlen.
- Verwenden Sie Browserlist, wenn Sie Babel verwenden (CSS ist PostCSS). Die fortgeschritteneren Browser erfordern weniger Polyfills und sind kleiner
- Codeaufteilung, verzögertes Laden von Routen, lädt nur das Paket der aktuellen Route, lädt die restlichen Blöcke bei Bedarf und die Größe von JS auf der Homepage wird kleiner (PS: Der zweite Artikel wird nicht reduziert die Gesamtgröße, reduziert aber die Größe der Homepage)
Verwenden Sie das splitChunksPlugin des Webpacks, um Bibliotheken zu unterpacken, auf die während der Laufzeit mehrfach verwiesen wird. Bei der Vergabe von Unteraufträgen sollte darauf geachtet werden, dass eine bestimmte Bibliothek nicht mehrfach referenziert wird mehrfach verpackt und mehrfach verpackt. Zu diesem Zeitpunkt ist es in mehrere Blöcke unterteilt. Obwohl es das Gesamtvolumen nicht reduzieren kann, kann es die Ladeleistung verbessern (PS: Dieser Artikel reduziert nicht das Gesamtvolumen, kann aber die Ladeleistung verbessern)