Compartilhando casos de depuração de frontend do Cashnote - Mas no meu computador funcionava...

Compartilhamento de casos de depuração de 3 problemas de CSS que a equipe de frontend do Cashnote (https://cashnote.kr) enfrentou nos últimos meses ao operar um produto em React

• Todos têm em comum o fato de terem sido descobertos em produção, e não no ambiente de desenvolvimento, ao usar CSS module com create-react-app

Problema 1: fenômeno em que, após entrar em uma página específica, as imagens ficam distorcidas em todas as páginas

• A causa foi definir estilos CSS em um formato que o CSS module não conseguia aplicar hashing

• A solução foi adicionar um plugin do stylelint para impedir que esse tipo de estilo fosse definido

Problema 2: fenômeno em que os estilos CSS aparecem de forma diferente no ambiente de desenvolvimento e no ambiente de produção

• A causa foi que um componente específico estava sobrescrevendo o estilo de um componente do design system, mas em produção o CSS do componente do design system era injetado mais tarde, então a sobrescrita não era aplicada

• No início, resolveram isso modificando a configuração do Webpack, mas não gostaram da decisão porque sacrificava a performance em produção

• Ao procurar outra forma, descobriram que era possível permitir a sobrescrita alterando a configuração do bundler (rollup) do lado do design system. O CSS injetado pelo design system passou a ficar sempre no topo do head

Problema 3: fenômeno em que não há problema ao executar no ambiente de desenvolvimento, mas o build de produção falha

• O build de produção falhava por causa de um aviso de que, no processo em que um plugin do Webpack cria CSS Chunks, dois arquivos CSS estavam sendo importados em ordens diferentes, então os dois chunks poderiam gerar resultados de estilo diferentes

• Como o Cashnote usa CSS module, cada arquivo CSS funciona de forma independente, então o order conflict não gera resultados de estilo diferentes. Por isso, alteraram a configuração do Webpack para ignorar o aviso

Os dois problemas seguintes tinham sintomas superficiais diferentes, mas eram semelhantes no ponto de terem surgido por “falta de entendimento sobre como o framework de frontend create-react-app funciona em produção”

• Como melhoria fundamental, estão aprofundando o entendimento sobre CRA e Webpack e, além disso, se preparando para remover o CRA

[xguru]

Obrigado por compartilhar essa experiência interessante. Como sempre, no ambiente local tudo funciona perfeitamente!

[spilist2]

Obrigado. Resumir o texto de forma simples também não é nada fácil, haha.