


Schnelle Optimierung Ihrer ReactJS-Anwendung hinsichtlich Leistung und Größe
React wird in großem Umfang für Frontend-intensive Anwendungen eingesetzt und bietet einzigartige Möglichkeiten zur Leistungs- und Größenoptimierung. Die Verbesserung beider wird einen erheblichen messbaren Einfluss auf die Größe des React-Paketpakets haben. Je kleiner die Bundle-Größe, desto schneller die Ladezeit, wenn man bedenkt, dass wir uns auf vom Client gerenderte Anwendungen konzentrieren.
Serverseitiges Rendering würde die Ladezeit weiter verbessern. Beim serverseitigen Rendering werden die React-Komponenten als HTML-Code auf dem Server selbst gerendert, wenn ein Benutzer eine Webseite anfordert. Anschließend wird diese vorgerenderte Seite an den Browser gesendet, sodass der Benutzer die Seite sofort sehen kann, ohne den Mehraufwand der JS-Ladezeit.
Aber das ist eine ganz andere Geschichte. Konzentrieren wir uns hauptsächlich auf den Versuch, unsere clientseitig gerenderte Website zu verbessern, indem wir an der Verbesserung der Paketpaketgröße arbeiten, indem wir Änderungen am Code vornehmen. Lass uns tief eintauchen.
1. Codeaufteilung und dynamische Importe
„Bündelung“ von React-Code ist der Prozess, bei dem alle Importe und Codes verfolgt und in einer einzigen Datei namens „Bundle“ zusammengefasst werden. Webpack, Browserify usw. erledigen dies bereits für uns.
Webpack verfügt über eine Funktion namens „Code Splitting“, die dafür verantwortlich ist, ein einzelnes Bundle in kleinere Teile aufzuteilen, die Teile zu deduplizieren und sie „bei Bedarf“ zu importieren. Dies wirkt sich erheblich auf die Ladezeit der Anwendung aus.
module.exports = { // Other webpack configuration options... optimization: { splitChunks: { chunks: 'all', // Options: 'initial', 'async', 'all' minSize: 10000, // Minimum size, in bytes, for a chunk to be generated maxSize: 0, // Maximum size, in bytes, for a chunk to be generated minChunks: 1, // Minimum number of chunks that must share a module before splitting maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading maxInitialRequests: 30, // Maximum number of parallel requests at an entry point automaticNameDelimiter: '~', // Delimiter for generated names cacheGroups: { defaultVendors: { test: /[\/]node_modules[\/]/, priority: -10, reuseExistingChunk: true, }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true, }, }, }, }, };
Lazy Loading Components with React Suspense (React 18): In Kombination mit dynamischen Importen führt dies zu einer sichtbaren Verbesserung der Komponentenladezeit.
Wenn wir untergeordnete Komponenten innerhalb einer übergeordneten Komponente importieren, importieren wir diese im Allgemeinen statisch. Um den Import dieser Komponente zu verhindern, bis wir sie tatsächlich rendern müssen, können wir eine Kombination aus dynamischen Importen mit React Suspense verwenden. React Suspense ermöglicht das Laden einer Komponente bei Bedarf. Es zeigt eine Fallback-Benutzeroberfläche, während die entsprechenden Komponenten dynamisch importiert und dann gerendert werden.
import { lazy } from 'react'; // The lazy loaded Component has to be exported as default const BlogSection = lazy(() => import('./BlogSection.tsx')); export default function HomePage() { return ( <suspense fallback="{<Loading"></suspense>}> <blogsection></blogsection> > ); } function Loading() { return <h2 id="Component-is-Loading">Component is Loading...</h2>; }
2. Baumschütteln
Dies ist eine Technik, die von JavaScript-Bundlern verwendet wird, um den gesamten nicht verwendeten Code zu entfernen, bevor Bundles erstellt werden. ES6-Code kann durcheinander gebracht werden; Code, der auf CommonJS basiert (d. h. „require“ verwendet), kann jedoch nicht im Tree-Shake-Modus ausgeführt werden.
Webpack Bundle Analyzer ist ein Plugin, das Ihnen hilft, die Größe eines Webpacks mit einer interaktiven Karte zu visualisieren.
npm install --save-dev webpack-bundle-analyzer npm install -g source-map-explorer
Konfigurieren Sie dann Ihr Webpack, um das Obige als Plugin hinzuzufügen:
plugins: [ new BundleAnalyzerPlugin(), new HtmlWebpackPlugin({ template: './public/index.html', // Path to your HTML template filename: 'index.html', // Output HTML file name inject: true, // Inject all assets into the body }), ];
Stellen Sie sicher, dass Ihr Skript für die Ausführung von Webpack konfiguriert ist:
"build": "webpack --config webpack.config.js --mode production"
Führen Sie „garn build“ aus, um eine report.html zu generieren, die Ihnen dabei hilft, Ihre Bündelgröße effektiv zu visualisieren.
Es wird ungefähr so aussehen:
3. Gleichzeitiges Rendern
Beginnen wir damit, zu verstehen, was Blocking Rendering ist. Beim Blockieren des Renderings wird der Hauptthread (UX-Updates) blockiert, weil React einige weniger wichtige Aufgaben im Hintergrund ausgeführt hat. Dies war bis React 16 der Fall.
React 18 hat gleichzeitige Funktionen eingeführt, was bedeutet, dass es Folgendes tun wird:
- Gibt Ihnen mehr Kontrolle darüber, wie Hintergrundaktualisierungen geplant werden, und sorgt für ein reibungsloses Endbenutzererlebnis, indem der Hauptthread nicht blockiert wird.
- Automatisches Stapeln von Statusaktualisierungen initiieren: Beim Stapeln handelt es sich um das Gruppieren mehrerer erneuter Renderings aufgrund mehrerer Statusaktualisierungen, sodass der Status nur einmal aktualisiert wird.
Verwenden Sie den Hook startTransition(), um React-Aktualisierungen als nicht dringend zu verwalten, und helfen Sie React dabei, dringende Aktualisierungen wie Benutzereingaben und Benutzerinteraktionen mit Komponenten gegenüber den vorherigen zu priorisieren.
module.exports = { // Other webpack configuration options... optimization: { splitChunks: { chunks: 'all', // Options: 'initial', 'async', 'all' minSize: 10000, // Minimum size, in bytes, for a chunk to be generated maxSize: 0, // Maximum size, in bytes, for a chunk to be generated minChunks: 1, // Minimum number of chunks that must share a module before splitting maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading maxInitialRequests: 30, // Maximum number of parallel requests at an entry point automaticNameDelimiter: '~', // Delimiter for generated names cacheGroups: { defaultVendors: { test: /[\/]node_modules[\/]/, priority: -10, reuseExistingChunk: true, }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true, }, }, }, }, };
In diesem Beispiel wird die handleChange-Funktion aufgerufen, wenn sich der Eingabewert ändert. Die startTransition-Funktion wird verwendet, um die Aktualisierung des Listenstatus als nicht dringend zu markieren. Dadurch kann React die Aktualisierung des Wertstatus priorisieren und sicherstellen, dass die Eingabe auch dann reagiert, wenn die Liste groß ist.
Verwenden Sie den useDeferredValue-Hook, um einen Wert (normalerweise eine teure Berechnung) zu verschieben, bis die Benutzeroberfläche weniger ausgelastet ist.
import { lazy } from 'react'; // The lazy loaded Component has to be exported as default const BlogSection = lazy(() => import('./BlogSection.tsx')); export default function HomePage() { return ( <suspense fallback="{<Loading"></suspense>}> <blogsection></blogsection> > ); } function Loading() { return <h2 id="Component-is-Loading">Component is Loading...</h2>; }
In diesem Beispiel wird der Hook „useDeferredValue“ verwendet, um den Wertstatus zu verschieben, bis die Benutzeroberfläche weniger ausgelastet ist. Dies trägt dazu bei, dass die Eingabe reaktionsfähig bleibt, indem das Rendern der großen Liste verschoben wird, bis die Eingabeaktualisierung verarbeitet wurde.
Hauptvorteile des gleichzeitigen Renderns:
- Verbesserte Reaktionsfähigkeit: Indem React die Renderarbeit unterbrechen kann, reagiert die Benutzeroberfläche weiterhin auf Benutzerinteraktionen.
- Priorisierung: React kann dringende Updates gegenüber nicht dringenden priorisieren und so ein reibungsloseres Benutzererlebnis gewährleisten.
- Bessere Leistung: Teure Updates können verschoben werden, wodurch die Auswirkungen auf den Hauptthread verringert und die Gesamtleistung der App verbessert werden.
4. Unterstützen Sie das Vorladen von Ressourcen (React 19)
Wenn Sie wissen, dass Ihre Anwendung beim Laden große Ressourcen abruft, wäre es eine gute Idee, die Ressource vorab zu laden. Diese Ressourcen können Schriftarten, Bilder, Stylesheets usw. sein.
Szenarien, in denen ein Vorladen von Vorteil wäre:
- Eine untergeordnete Komponente würde eine Ressource verwenden. In diesem Fall können Sie es während der Renderphase der übergeordneten Komponente vorab laden.
- Laden Sie es vorab in einen Event-Handler, der zu einer Seite/Komponente weiterleitet, die diese Ressource verwenden würde. Dies ist tatsächlich eine bessere Option, als es während des Renderns vorab zu laden.
module.exports = { // Other webpack configuration options... optimization: { splitChunks: { chunks: 'all', // Options: 'initial', 'async', 'all' minSize: 10000, // Minimum size, in bytes, for a chunk to be generated maxSize: 0, // Maximum size, in bytes, for a chunk to be generated minChunks: 1, // Minimum number of chunks that must share a module before splitting maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading maxInitialRequests: 30, // Maximum number of parallel requests at an entry point automaticNameDelimiter: '~', // Delimiter for generated names cacheGroups: { defaultVendors: { test: /[\/]node_modules[\/]/, priority: -10, reuseExistingChunk: true, }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true, }, }, }, }, };
Interessante Tatsache: Nach der Implementierung des Vorladens verzeichneten viele Websites, darunter Shopify, Financial Times und Treebo, 1-Sekunden-Verbesserungen bei benutzerzentrierten Kennzahlen wie der Zeit bis zur Interaktion und der vom Benutzer wahrgenommenen Latenz.
Bitte hinterlassen Sie ein Feedback
Ich hoffe, Sie fanden diesen Blog hilfreich! Ihr Feedback ist für mich von unschätzbarem Wert , hinterlassen Sie also bitte Ihre Gedanken und Vorschläge in den Kommentaren unten.
Vernetzen Sie sich gerne mit mir auf LinkedIn, um weitere Einblicke und Updates zu erhalten. Bleiben wir in Verbindung und lernen und wachsen wir gemeinsam weiter!
Das obige ist der detaillierte Inhalt vonSchnelle Optimierung Ihrer ReactJS-Anwendung hinsichtlich Leistung und Größe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript ist das Herzstück moderner Websites, da es die Interaktivität und Dynamik von Webseiten verbessert. 1) Es ermöglicht die Änderung von Inhalten, ohne die Seite zu aktualisieren, 2) Webseiten durch DOMAPI zu manipulieren, 3) Komplexe interaktive Effekte wie Animation und Drag & Drop, 4) die Leistung und Best Practices optimieren, um die Benutzererfahrung zu verbessern.

C und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.

JavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.

Python eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.

C und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.

Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.


Heiße KI -Werkzeuge

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

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

Undress AI Tool
Ausziehbilder kostenlos

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

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

SublimeText3 Englische Version
Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version

WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools

mPDF
mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),