Cashnote फ्रंटएंड डिबगिंग केस स्टडी साझा - मेरे कंप्यूटर पर तो यह चल रहा था...

 (spilist.notion.site)
11 पॉइंट द्वारा spilist2 2021-09-23 | 2 टिप्पणियां | WhatsApp पर शेयर करें

पिछले कुछ महीनों में Cashnote(https://cashnote.kr) फ्रंटएंड टीम ने React प्रोडक्ट को ऑपरेट करते हुए जिन 3 CSS समस्याओं को डिबग किया, उनके केस साझा किए हैं

  • इन सभी में एक समान बात यह थी कि create-react-app में CSS module का उपयोग करते समय, जो समस्याएँ डेवलपमेंट environment में नहीं दिखीं, वे production environment में मिलीं

समस्या 1: किसी खास पेज में जाने के बाद सभी पेजों पर इमेज विकृत दिखने लगती थीं

  • इसका कारण CSS styles को ऐसे रूप में define करना था जिसे CSS module hash नहीं कर पाता था

  • समाधान के लिए stylelint plugin जोड़ा गया ताकि ऐसे styles define ही न किए जा सकें

समस्या 2: डेवलपमेंट environment और production environment में CSS styles अलग तरह से दिखते थे

  • एक खास component, design system component के styles को override कर रहा था, लेकिन production environment में design system component का CSS inject होने का timing अधिक देर से था, इसलिए style override लागू नहीं हो रहा था

  • शुरुआत में Webpack setting बदलकर इसे ठीक किया गया, लेकिन यह production performance की कीमत पर लिया गया फैसला था, इसलिए यह पसंद नहीं आया

  • दूसरा तरीका खोजते हुए पता चला कि design system की bundler(rollup) setting बदलकर override संभव बनाया जा सकता है। design system द्वारा inject किया जाने वाला CSS हमेशा head के ऊपरी हिस्से में रहे, ऐसा बदला गया

समस्या 3: डेवलपमेंट environment में चलाते समय कोई समस्या नहीं थी, लेकिन production build fail हो जाती थी

  • Webpack plugin जब CSS Chunk बनाने की प्रक्रिया में था, तब उसने चेतावनी दी कि दो CSS फाइलें अलग-अलग क्रम में import हो रही हैं, इसलिए दोनों chunks में अलग style output आ सकता है; इसी warning के कारण production build fail हो रही थी

  • चूँकि Cashnote CSS module का उपयोग करता है, इसलिए हर CSS फाइल स्वतंत्र रूप से काम करती है, और order conflict से अलग style output नहीं बनता। इसलिए warning को ignore करने के लिए Webpack setting बदली गई

आखिरी दो समस्याओं के बाहरी लक्षण अलग थे, लेकिन इस अर्थ में वे समान थीं कि उनकी जड़ “create-react-app नामक फ्रंटएंड framework के production environment में काम करने के तरीके की समझ की कमी” थी

  • मूलभूत सुधार के लिए, CRA और Webpack की समझ बढ़ाई जा रही है, और आगे चलकर CRA को हटाने की तैयारी भी की जा रही है

संबंधित पढ़ाई

2 टिप्पणियां

 
xguru 2021-09-23

यह दिलचस्प अनुभव साझा करने के लिए धन्यवाद। सचमुच, लोकल में तो हमेशा सब कुछ ठीक ही चलता है!
 
spilist2 2021-09-23

धन्यवाद। इस लेख का संक्षेप में सार बताना भी आसान नहीं है, haha