Compartiendo casos de depuración de frontend en Cashnote - Pero en mi computadora sí funcionaba...
(spilist.notion.site)Compartimos tres casos de depuración de problemas de CSS que el equipo de frontend de Cashnote (https://cashnote.kr) experimentó durante los últimos meses al operar un producto en React
- Todos tienen en común que usaban CSS module en create-react-app y que fueron problemas detectados en producción, no en el entorno de desarrollo
Problema 1: A partir de entrar a una página específica, las imágenes se deformaban en todas las páginas
-
La causa fue que se definió un estilo CSS en una forma que CSS module no podía hashear
-
Se resolvió agregando un plugin de stylelint para impedir que se definan ese tipo de estilos
Problema 2: Los estilos CSS se mostraban de forma distinta entre el entorno de desarrollo y el de producción
-
Un componente específico estaba sobrescribiendo el estilo de un componente del sistema de diseño, pero en producción el CSS del componente del sistema de diseño se inyectaba más tarde, por lo que la sobrescritura no se aplicaba
-
Al principio se resolvió modificando la configuración de Webpack, pero no les gustó porque era una decisión que sacrificaba el rendimiento en producción
-
Mientras buscaban otra forma, descubrieron que era posible permitir la sobrescritura cambiando la configuración del bundler (rollup) del lado del sistema de diseño. Cambiaron para que el CSS inyectado por el sistema de diseño siempre quedara al inicio de
head
Problema 3: No había problemas al ejecutar en desarrollo, pero el build de producción fallaba
-
Durante el proceso en que un plugin de Webpack crea CSS Chunk, el build de producción fallaba por una advertencia de que dos archivos CSS se importaban en distinto orden y que eso podía producir resultados de estilo diferentes entre ambos chunks
-
Como Cashnote usa CSS module, cada archivo CSS funciona de manera independiente, así que el conflicto de orden no produce resultados de estilo distintos. Por eso cambiaron la configuración de Webpack para ignorar la advertencia
Los dos problemas posteriores tenían síntomas superficiales distintos, pero eran similares en que se originaban en una “falta de entendimiento sobre cómo funciona en producción el framework de frontend create-react-app”
- Como mejora de fondo, están elevando su comprensión de CRA y Webpack, y además se están preparando para retirar CRA
2 comentarios
Gracias por compartir una experiencia tan interesante. Como siempre, en local todo funciona bien, ¿no?
Gracias. Resumir el artículo de forma breve tampoco es tan fácil jaja.