Textkomprimierung und Codeaufteilung sowie moderne Bildformate – Leistungsoptimierung

Ich habe Folgendes versucht, um die Leistung meines Nebenprojekts zu optimieren:

1. Textkomprimierung
2. Codeaufteilung
3. moderne Bildformate.

Profiler

Die App, die ich erstellt habe, verwendete Vite mit pnpm. Moderne Web-Build-Tools optimieren die Web-Performance standardmäßig automatisch im Build-Prozess. Wir können also pnpm build ausführen und dann pnpm dlx dist bereitstellen. Verwenden Sie dann Lighthouse of Chrome DevTools als Leitfaden, um jeden aufgeführten Engpass zu beheben.

Aktivieren Sie die Textkomprimierung

Es betrifft FCP und LCP.

Das erste, was Lighthouse vorschlägt, ist die Komprimierung von Text mit Algorithmen wie br oder gzip.

Üblicherweise wird bei jeder Webanfrage Accept-Encoding: gzip hinzugefügt. Da die App, die ich erstelle, die Ressource lokal bereitstellt, habe ich das Vite-Plugin-Compress installiert, um die Dateien zu komprimieren.

Schritt 1: vite-plugin-compress installieren
Schritt 2: Konfigurieren Sie die Datei vite.config.js und fügen Sie das Plugin und einige Parameter hinzu. Wie Google Developers vorschlägt, sollte br(brotliCompress) so oft wie möglich anstelle von gzip verwendet werden.

Zum Beispiel

viteCompression({
      verbose: true,
      disable: false,
      algorithm: 'brotliCompress',
      ext: '.br',
    }),

Schritt 3: Führen Sie pnpm und run build aus, um

JS- und CSS-Dateien wurden erfolgreich komprimiert.

Protokolle:

✨ [vite-plugin-compression]:algorithm=brotliCompress – Datei erfolgreich komprimiert.

Vite würde die Datei standardmäßig mit .gzip komprimieren, aber brotliCompress kann es besser machen, Komprimierung während des Erstellungsprozesses:

Vite mit gzip

vite v5.4.10 wird für die Produktion erstellt...
✓ 654 Module umgewandelt.

index-B9QUW17e.css 8,60 kB │ gzip: 2,33 kB
PauseMenu-DjZ95K-6.js 1,77 kB │ gzip: 0,62 kB
index-ohAKp9W9.js 1.688,05 kB │ gzip: 454,20 kB

Vite-Plugin-Komprimierung mit br

✨ [vite-plugin-compression]:algorithm=brotliCompress - Datei erfolgreich komprimiert:
PauseMenu-DjZ95K-6.js.br 1,73 kb / brotliKomprimieren: 0,51 kb
index-B9QUW17e.css.br 8,40 KB / brotliKomprimieren: 1,97 KB
index-ohAKp9W9.js.br 1648,49 kb / brotliCompress: 345,30 kb

Reduzierung ungenutzten JavaScripts

Es betrifft FCP und LCP.

Verwenden Sie die Registerkarte „Abdeckung“ in Google DevTools, um die Skripte anzuzeigen, die ungenutzte Bytes über 20 KB haben.

Da ich Vite mit React verwende, ist die Codeaufteilung das erste, was dazu beiträgt, ungenutztes JavaScript zu reduzieren.

In React können und lazy() dabei helfen.

1. Verwenden Sie , um die gesamte App zu umschließen und eine Fallback-Benutzeroberfläche bereitzustellen, z. B.
   Loading
   . Dies stellt eine Fallback-Benutzeroberfläche bereit, wenn die App geladen wird.
2. Verwenden Sie lazy(), um die Komponenten einzuschließen, die auf der Startseite nicht verwendet wurden. Wenn Benutzer beispielsweise bei Spielen die Esc-Taste drücken, wird ein Menü angezeigt, das Sie abschließen können.

Stellen Sie Bilder in modernen Formaten bereit

Chrome Developers schlägt vor, Bilder im Format AVIF oder WebP bereitzustellen. Ich habe mich für WebP entschieden, weil es mehr Browserunterstützung bietet.

Die neuesten Versionen von Chrome, Firefox, Safari, Edge und Opera unterstützen WebP, während die AVIF-Unterstützung eingeschränkter ist.

Informationen zur Unterstützung des WebP-Bildformats finden Sie unter Kann ich verwenden.

Sie können die cwebp-Bibliothek bei WebP installieren und den Befehl cwebp -q 50 images/flower1.jpg -o images/flower1.webp verwenden, um .png in .webp zu konvertieren .

Dieser Befehl konvertiert mit einer Qualität von 50 (0 ist die schlechteste; 100 ist die beste) die Datei „images/flower1.jpg“ und speichert sie als „images/flower1.webp“.

Das Komprimierungsergebnis ist ziemlich beeindruckend. Eine der Dateien wurde von 3,5 MB auf 178 KB verkleinert. Selbst die mit geringer Informationsintensität bieten eine 4-fache Komprimierung.

Wir können sogar ein einfaches .bat-Skript schreiben, um alle .png-Bilder im Zielordner automatisch in .webp-Bilder zu konvertieren.

viteCompression({
      verbose: true,
      disable: false,
      algorithm: 'brotliCompress',
      ext: '.br',
    }),

Referenz

• Nicht verwendetes JavaScript entfernen
• Mit der Registerkarte „Abdeckung“ können Sie verwendetes und nicht verwendetes CSS anzeigen.
• Bilder in modernen Formaten bereitstellen.
• WebP-Bilder mit der Befehlszeile erstellen
• Vorkompilierte Dienstprogramme
• WebP-Bildformat – Kann ich verwenden
• Größtes Contentful Paint (LCP)
• First Contentful Paint (FCP)

Das obige ist der detaillierte Inhalt vonTextkomprimierung und Codeaufteilung sowie moderne Bildformate – Leistungsoptimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!