Debugging-Fallbeispiele aus dem Frontend-Team von Cashnote – „Auf meinem Rechner hat es funktioniert ...“

 (spilist.notion.site)
11 Punkte von spilist2 2021-09-23 | 2 Kommentare | Auf WhatsApp teilen

Ein Erfahrungsbericht über das Debugging von drei CSS-Problemen, die das Frontend-Team von Cashnote (https://cashnote.kr) in den vergangenen Monaten beim Betrieb eines React-Produkts erlebt hat

  • Gemeinsam ist allen Fällen, dass sie beim Einsatz von CSS Modules in create-react-app im Entwicklungsumfeld nicht auftraten, sondern erst in der Produktionsumgebung entdeckt wurden

Problem 1: Ab dem Aufruf einer bestimmten Seite werden Bilder auf allen Seiten verzerrt dargestellt

  • Ursache war, dass CSS-Stile in einer Form definiert wurden, die von CSS Modules nicht gehasht werden konnte

  • Gelöst wurde das durch das Hinzufügen eines stylelint-Plugins, damit solche Styles nicht mehr definiert werden können

Problem 2: CSS-Stile werden in Entwicklungs- und Produktionsumgebung unterschiedlich dargestellt

  • Ein bestimmtes Component überschreibt die Styles eines Design-System-Components, aber in der Produktionsumgebung wurde das CSS des Design-Systems später injiziert, sodass das Style-Override nicht angewendet wurde

  • Zunächst wurde das Problem durch eine Änderung der Webpack-Konfiguration gelöst, aber diese Entscheidung ging zulasten der Performance in der Produktionsumgebung und gefiel daher nicht

  • Bei der Suche nach einer anderen Methode wurde entdeckt, dass Overrides durch eine Änderung der Bundler-Konfiguration (rollup) auf Seiten des Design-Systems möglich gemacht werden können. Das vom Design-System injizierte CSS wurde so geändert, dass es immer am Anfang von head platziert wird

Problem 3: Beim Ausführen in der Entwicklungsumgebung gibt es keine Probleme, aber der Production-Build schlägt fehl

  • Während ein Webpack-Plugin CSS-Chunks erstellt, schlägt der Build in der Produktionsumgebung fehl, weil eine Warnung meldet, dass zwei CSS-Dateien in unterschiedlicher Reihenfolge importiert werden und daher in den beiden Chunks unterschiedliche Style-Ergebnisse entstehen könnten

  • Da Cashnote CSS Modules verwendet, arbeiten die einzelnen CSS-Dateien unabhängig voneinander, sodass ein order conflict nicht zu unterschiedlichen Style-Ergebnissen führt. Daher wurde die Webpack-Konfiguration so geändert, dass diese Warnung ignoriert wird

Die beiden späteren Probleme unterschieden sich zwar in ihrer oberflächlichen Erscheinung, waren aber insofern ähnlich, als sie beide aus einem „mangelnden Verständnis dafür, wie das Frontend-Framework create-react-app in der Produktionsumgebung arbeitet“ entstanden

  • Als grundlegende Verbesserung wird derzeit das Verständnis für CRA und Webpack vertieft und außerdem die Vorbereitung darauf vorangetrieben, CRA künftig abzulösen

Verwandte Beiträge

2 Kommentare

 
xguru 2021-09-23

Danke fürs Teilen dieser interessanten Erfahrung. Lokal funktioniert natürlich immer alles perfekt!
 
spilist2 2021-09-23

Vielen Dank. Es ist auch nicht gerade einfach, den Artikel kurz zusammenzufassen, haha.