


Textkomprimierung und Codeaufteilung sowie moderne Bildformate – Leistungsoptimierung
Dec 13, 2024 am 12:10 AMIch habe Folgendes versucht, um die Leistung meines Nebenprojekts zu optimieren:
- Textkomprimierung
- Codeaufteilung
- 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
zu komprimierenJS- 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 kBVite-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
- 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. - 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!

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Hei?e Themen

Java und JavaScript sind unterschiedliche Programmiersprachen, die jeweils für verschiedene Anwendungsszenarien geeignet sind. Java wird für die Entwicklung gro?er Unternehmen und mobiler Anwendungen verwendet, w?hrend JavaScript haupts?chlich für die Entwicklung von Webseiten verwendet wird.

JavaScriptComents AreseessentialFormaintaining, Lesen und GuidingCodeexexecution.1) einzelne Linecommments Arequickickexplanationen.2) Multi-LindexplainComproxlogicorProvedetailedDocumentation.3) InlinecommentsclarifyspecificPartsosensofCode.BestPracticic

CommentareAtecrucialinjavaScriptFormaintainingClarity und FosteringCollaboration.1) thehelpindebugging, Onboarding, und die Verst?rkung vonCodeevolution.2) Verwendungsle-Linien- und Verst??en für FosterquickexPlanations und Multi-LinecomMentSfordsetaileddescriptions.3) Bestpraktiziert

Die folgenden Punkte sollten bei der Verarbeitung von Daten und Zeiten in JavaScript festgestellt werden: 1. Es gibt viele M?glichkeiten, Datumsobjekte zu erstellen. Es wird empfohlen, ISO -Format -Zeichenfolgen zu verwenden, um die Kompatibilit?t sicherzustellen. 2. Die Zeitinformationen erhalten und festlegen k?nnen und setzen Sie Methoden fest, und beachten Sie, dass der Monat mit 0 beginnt. 3. Die manuell formatierende Daten sind Zeichenfolgen erforderlich, und auch Bibliotheken von Drittanbietern k?nnen verwendet werden. 4. Es wird empfohlen, Bibliotheken zu verwenden, die Zeitzonen wie Luxon unterstützen. Das Beherrschen dieser wichtigen Punkte kann h?ufige Fehler effektiv vermeiden.

JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor

JavaScripthassevenfundamentaldatatypes:number,string,boolean,undefined,null,object,andsymbol.1)Numbersuseadouble-precisionformat,usefulforwidevaluerangesbutbecautiouswithfloating-pointarithmetic.2)Stringsareimmutable,useefficientconcatenationmethodsf

PlatztagsattheBottomofabogpostorwebpageServeSpracticalPurposesforseo, Usexperience und design.1ithelpswithseobyallowingEnginestoaccessKeyword-relevantTagswithoutClutteringHemainContent.2.

Ereigniserfassung und Blase sind zwei Phasen der Ereignisausbreitung in DOM. Die Erfassung erfolgt von der oberen Schicht bis zum Zielelement, und die Blase ist vom Zielelement bis zur oberen Schicht. 1. Die Ereigniserfassung wird implementiert, indem der UseCapture -Parameter von AddEventListener auf true festgelegt wird. 2. Ereignisblase ist das Standardverhalten, Uscapture ist auf false oder weggelassen. 3. Die Ereignisausbreitung kann verwendet werden, um die Ereignisausbreitung zu verhindern. 4. Event Bubbling unterstützt die Ereignisdelegation, um die Effizienz der dynamischen Inhaltsverarbeitung zu verbessern. 5. Capture kann verwendet werden, um Ereignisse im Voraus abzufangen, wie z. B. Protokollierung oder Fehlerverarbeitung. Das Verst?ndnis dieser beiden Phasen hilft dabei, das Timing und die Reaktion von JavaScript auf Benutzeroperationen genau zu steuern.
