国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Heim Web-Frontend js-Tutorial Textkomprimierung und Codeaufteilung sowie moderne Bildformate – Leistungsoptimierung

Textkomprimierung und Codeaufteilung sowie moderne Bildformate – Leistungsoptimierung

Dec 13, 2024 am 12:10 AM

Text compression & Code splitting & Modern image formats - Performance optimization

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

zu komprimieren

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!

Erkl?rung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Hei?e KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

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

Hei?e Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Java vs. JavaScript: Die Verwirrung beseitigen Java vs. JavaScript: Die Verwirrung beseitigen Jun 20, 2025 am 12:27 AM

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.

JavaScript -Kommentare: Kurzer Erl?uterung JavaScript -Kommentare: Kurzer Erl?uterung Jun 19, 2025 am 12:40 AM

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

Mastering JavaScript -Kommentare: Ein umfassender Leitfaden Mastering JavaScript -Kommentare: Ein umfassender Leitfaden Jun 14, 2025 am 12:11 AM

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

Wie arbeite man mit Daten und Zeiten in JS? Wie arbeite man mit Daten und Zeiten in JS? Jul 01, 2025 am 01:27 AM

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.

JavaScript vs. Java: Ein umfassender Vergleich für Entwickler JavaScript vs. Java: Ein umfassender Vergleich für Entwickler Jun 20, 2025 am 12:21 AM

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

JavaScript: Datentypen zur effizienten Codierung untersuchen JavaScript: Datentypen zur effizienten Codierung untersuchen Jun 20, 2025 am 12:46 AM

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

Warum sollten Sie  Tags am Ende des  platzieren? Warum sollten Sie Tags am Ende des platzieren? Jul 02, 2025 am 01:22 AM

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

Was sprudelt und f?ngt Ereignis im Dom? Was sprudelt und f?ngt Ereignis im Dom? Jul 02, 2025 am 01:19 AM

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.

See all articles