React.lazy und Suspense: Der versteckte 300-ms-Startverzögerung
React.lazy, Suspense and the Hidden 300 ms Delay
Eine neue Tab-Erweiterung lud ihren Code in etwa 100 ms, zeigte die Widgets aber erst nach 380 ms an. Der Grund: React.lazy suspendiert beim ersten Rendern immer, und React hält suspendierte Inhalte dann 300 ms lang zurück. Durch einen eigenen Platzhalter statt Suspense erschienen die ersten Widget-Inhalte rund 240 ms früher. Die Verkleinerung des Bundles brachte keine messbare Verbesserung.
Der 300-ms-Timer ist absichtlich so gesetzt: Er verhindert, dass eine Seite flackert, wenn viele kleine Teile zu leicht unterschiedlichen Zeiten fertig werden. In Fällen wie unserem, in denen der Inhalt fast sofort bereit ist, schadet er jedoch.