React Profiler vorgestellt

React 16.5: Neuer Profiler auch für die Production nutzbar
Keine Kommentare

React 16.5 hat einen neuen Profiler mitgebracht, das war bereits aus den Release Notes bekannt. Nun hat Brian Vaughn den Profiler noch einmal genauer vorgestellt. Vaughn erklärt, wie das Tool nicht nur im Dev-Mode, sondern auch in der Production genutzt werden kann.

Der neue React Profiler sammelt Informationen über das Rendering aller Komponenten einer React-Anwendung und gibt diese in verschiedenen Charts aus. Der Profiler wurde mit React 16.5 veröffentlicht und ist über die React DevTools verfügbar. Wie Vaughn im Blogpost zum Profiler erläutert, steht das Tool für react-dom ab Version 16.5 im Dev-Mode zur Verfügung.

React 16.5: Profiler auch für Production

Für den Production-Mode kann das Package unter react-dom/profiling gefunden werden. Grundsätzlich wird das Profiling auch im Production Mode unterstützt. Da der Profiler jedoch einen Overhead erzeugt, muss die Verwendung hier manuell aktiviert und konfiguriert werden. Eine Anleitung dafür hat Vaughn auf GitHubGist erstellt.

Sobald der neue Profiler gestartet wurde, protokolliert er alle durchgeführten Render- und Commitvorgänge. Zur besseren Übersicht bringt der Profiler eine Filter-Funktion mit, über die ausgewählt werden kann, welche Daten angezeigt werden sollen.

Verschiedene Charts im React Profiler

Ausgegeben werden die erhobenen Daten in verschiedenen Charts, wie Vaughn im React-Blog erklärt. Das Flame Chart zeigt die Daten pro Komponente und Commit an. Abgelesen werden kann hier, wie lange es dauerte, eine Komponente zu rendern. Anhand der Farbgebung ist in der Darstellung ersichtlich, wo besonders viel Zeit in Anspruch genommen wurde, also ein Bottleneck vorliegen könnte. Im Ranked Chart wird ebenfalls farbig kodiert, welche Komponenten innerhalb eines einzelnen Commits wieviel Renderzeit benötigten. Hier werden die Komponenten jedoch anhand der Zeit sortiert dargestellt. Mit dem Component Chart können Entwickler außerdem verschiedene Rendervorgänge der gleichen Komponente miteinander vergleichen. Hier wird die Zeit außerdem in Relation zu anderen Komponenten im selben Commit gesetzt.

Der React Profiler basiert auf dem selbst noch experimentellen Profiler API. Mehr Informationen zum Profiler gibt Brian Vaughn im React-Blog.

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -