⭐️ 👨‍👩‍👧 🚵🏻 प्रतिक्रिया अनुप्रयोग त्वरण चार गुना 📏 😴 🔒

लगभग 60% साइट विज़िटर इसे छोड़ देते हैं यदि इसे लोड करने में 3 सेकंड से अधिक समय लगता है। 80% ऐसे आगंतुक अब साइट पर नहीं लौट रहे हैं। यह बताता है कि एक वेब परियोजना की सफलता कम से कम इसकी गति पर निर्भर नहीं है। सामग्री के लेखक, जिसका अनुवाद आज हम प्रकाशित कर रहे हैं, रिएक्ट अनुप्रयोगों के प्रदर्शन में सुधार के लिए तकनीकों के बारे में बात करना चाहते हैं।

आवेदन अनुकूलन परिणाम

मानक

इससे पहले कि मैं आपको बताऊं कि मैंने कैसे आवेदन में तेजी लाई, मैं कुछ संख्याएँ दिखाना चाहता हूँ। यहां मापन इस अपेक्षा के साथ किया गया था कि वे आधुनिक मानकों द्वारा धीमी गति से एक कनेक्शन का उपयोग करके आवेदन के साथ काम करेंगे। लेकिन यह ध्यान दिया जाना चाहिए कि वास्तव में अधिकांश उपयोगकर्ताओं के पास तेज कनेक्शन होंगे।

Chrome डेवलपर टूल के नेटवर्क टैब द्वारा किए गए मापों के दौरान, डेटा ट्रांसफर दर जबरन 3 जी कनेक्शन के स्तर तक सीमित थी।
कैश अक्षम के साथ प्राप्त पहले लोड मीट्रिक।
दूसरा लोड संकेतक कैश के चालू होने पर एप्लिकेशन को फिर से लोड करने के समय को इंगित करता है।

जैसा कि आप देख सकते हैं, एक अनुकूलित और गैर-अनुकूलित अनुप्रयोग के बीच का अंतर काफी बड़ा है। यह धीमे नेटवर्क में विशेष रूप से ध्यान देने योग्य है।

स्रोत-मानचित्र-एक्सप्लोरर का उपयोग करके एप्लिकेशन बंडल के आकार की जांच की गई थी। यह उपकरण आपको यह भी बता देता है कि विभिन्न पुस्तकालयों में कितनी जगह है। Google लाइटहाउस का उपयोग करके जो संकेतक आकृति के शीर्ष पर देखे जा सकते हैं, उन्हें मापा जाता है।

अब मैं इस बारे में बात करूँगा कि मैंने आवेदन को कैसे अनुकूलित किया।

1. सीएसएस-इन-जेएस के बजाय सीएसएस का उपयोग करना

एप्लिकेशन के पुराने संस्करण में, मैंने स्टाइल-कंपोनेंट्स लाइब्रेरी का उपयोग किया। यह बुरा क्यों है? बात यह है, सादे सीएसएस तेज है और कम जगह लेता है। आधुनिक ब्राउज़र सीएसएस कोड को जावास्क्रिप्ट बंडल के साथ समानांतर में लोड कर सकते हैं। इसके अलावा, आपको नियमित सीएसएस का उपयोग करने के लिए अतिरिक्त पुस्तकालय की आवश्यकता नहीं है। स्टाइल-घटकों का छोटा संस्करण लगभग 54 Kb है। स्टाइल-घटकों के बजाय नियमित सीएसएस का उपयोग करने से यह तथ्य सामने आया कि एप्लिकेशन कोड तेजी से लोड होता है, और इस तथ्य से कि जब शैलियों को बदलते हैं तो सिस्टम को कम कम्प्यूटेशन करना पड़ता है।

बस स्टाइल-कंपोनेंट्स लाइब्रेरी को छोड़ना और नियमित सीएसएस पर स्विच करना साइट लोड समय को लगभग 0.3 सेकंड कम कर सकता है

यदि CSS CSS-in-JS को लागू करने वाली तकनीकों से बेहतर प्रदर्शन की अनुमति देता है, तो आपको आश्चर्य हो सकता है कि डेवलपर्स इस घटक स्टाइलिंग तकनीक का उपयोग क्यों करते हैं। सीएसएस-इन-जेएस चुनने के कारणों में यह तथ्य है कि यह तकनीक आपको शैलियों के दायरे को सीमित करने और वैश्विक स्टाइल को त्यागने की अनुमति देती है। एप्लिकेशन थीम के साथ काम करने के लिए उपयोग करना सुविधाजनक है। और कोई, हो सकता है, बस उस तरह से रिएक्ट एप्लिकेशन स्टाइल करना पसंद करता है।

। सीमित दायरे वाली शैलियाँ

Create-react-app अब एक सीमित दायरे के साथ आधिकारिक तौर पर CSS मॉड्यूल का समर्थन करता है। इसका मतलब है कि आप अतिरिक्त पुस्तकालयों का उपयोग किए बिना शैलियों के दायरे को सीमित कर सकते हैं।

▍ थीम्स

यदि आप स्टाइल-कंपोनेंट्स लाइब्रेरी के साथ काम करते हैं, तो थीम को परिभाषित करने वाले चर का उपयोग करने के लिए, बस इन वेरिएबल्स को ThemeProvider में ThemeProvider । यह सब अच्छा है, लेकिन मई 2019 तक, 91% ब्राउज़र समान मानक CSS सुविधा का समर्थन करते हैं।

अगर आपको लगता है कि 91% एक अच्छा संकेतक नहीं है, तो विचार करें कि यह छोटा नहीं हो सकता है।

सीएसएस चर समर्थन

वास्तव में, यदि आप IE समर्थन में रुचि नहीं रखते हैं, तो आप सुरक्षित रूप से अपनी परियोजनाओं में सीएसएस चर का उपयोग कर सकते हैं। यदि आप इस विषय में रुचि रखते हैं - मैं इस सामग्री पर एक नज़र डालने की सलाह देता हूं।

2. बड़े सीएसएस पुस्तकालयों से बचना

पैकेज विश्लेषण सामग्री-यूआई

मैं मटीरियल डिजाइन का बहुत बड़ा प्रशंसक हूं। एक महान सामग्री पुस्तकालय जिसे मैटेरियल-यूआई कहा जाता है, रिएक्ट के लिए लिखा गया है। इस लाइब्रेरी में केवल एक समस्या है। यह उसका आकार है। वह बहुत शानदार है। यहां तक कि अगर आप केवल इसके व्यक्तिगत घटकों का उपयोग करते हैं, तो सीएसएस-इन-जेएस तंत्र का कार्यान्वयन बंडल में गिर जाएगा, और यह लगभग 30 Kb का न्यूनतम कोड है।

विकल्प क्या हैं? मैंने अपने खुद के घटकों का निर्माण करने का फैसला किया, उन्हें एप्लिकेशन बनाने की प्रक्रिया में स्टाइल किया। इस पसंद के कारणों में से एक यह था कि मैं अपने सीएसएस ज्ञान को ताज़ा करना चाहता था। और मैंने लंबे समय तक CSS कोड नहीं लिखा है। हालांकि, अन्य संभावनाएं हैं। विशेष रूप से, हम सीएसएस फ्रेमवर्क के बारे में बात कर रहे हैं, जिनमें से आकार सामग्री-यूआई के आकार से बहुत छोटे हैं। उदाहरण के लिए, ये स्पेक्टर और बुल्मा हैं, जिनमें से कोड GZIP संपीड़न के बाद क्रमशः 9 और 40 Kb लगते हैं।

भूत - 9 Kb GZIP- संपीड़न के बाद

बुलमा - GZIP- संपीड़न के बाद 40 Kb

3. आलसी लोडिंग पेज

तो, आपके पास कई आयातित पृष्ठों के साथ एक राउटर है। अगर हम एक-दो पन्नों की बात कर रहे हैं - तो यहाँ कोई समस्या नहीं है। लेकिन जैसे-जैसे पृष्ठों की संख्या बढ़ती है, वैसे-वैसे साइट पहले प्रदर्शित होती है। यहाँ आयात आदेश क्या दिख सकते हैं:

 import NotFound from "pages/NotFound"; import Projects from "pages/Projects"; import Project from "pages/Project";

इसे कैसे सुधारा जाए? सौभाग्य से, हमारे लिए, प्रतिक्रिया आलसी पृष्ठ लोड करने का आयोजन कर सकती है। वही घटक कोड पर लागू होता है, जिसे आवश्यक होने पर लोड किए गए छोटे टुकड़ों में तोड़ा जा सकता है। यहाँ यह कैसा दिखता है:

 import React, { lazy, Suspense } from "react"; const load = (Component: any) => (props: any) => (   <Suspense fallback={<Loader />}>       <Component {...props} />   </Suspense> ); const NotFound = load(lazy(() => import("pages/NotFound"))); const Projects = load(lazy(() => import("pages/Projects"))); const Project = load(lazy(() => import("pages/Project")));

4. प्रगतिशील वेब अनुप्रयोग टेक्नोलॉजीज

प्रगतिशील वेब एप्लिकेशन सेवा श्रमिकों का उपयोग करते हैं। वे उपयोगकर्ताओं को अपने उपकरणों के होम स्क्रीन पर एप्लिकेशन जोड़ने की अनुमति देते हैं। लेकिन यह सेवा कार्यकर्ता विकल्पों तक सीमित नहीं है। विशेष रूप से, वे कैशिंग में काफी सुधार करने में सक्षम हैं। यह इस तथ्य की ओर जाता है कि आवेदन, पहले डाउनलोड के बाद, बहुत तेज़ी से लोड होगा।

5. उन पैकेजों से छुटकारा पाना जो दिलचस्प लगते हैं, लेकिन बहुत लाभ नहीं लाते हैं

अपने मूल प्रोजेक्ट में, जब मैंने घटकों को माउंट किया, तो मैंने बहुत सारे एनीमेशन का उपयोग किया जो पेज के लोडिंग को एनिमेटेड करता है। यह सब सिर्फ पृष्ठ को धीमा नहीं करता था। इससे वह जितना हो सकता था, उससे बहुत धीमा हो गया। मैं, साइट को देख रहा हूं, और कितना प्यारा लग रहा है, जब तक कि एक निश्चित बिंदु ने प्रदर्शन के बारे में नहीं सोचा था। लेकिन साइट न केवल एनिमेटेड थी। इसी तरह की अन्य सजावट थी। उदाहरण के लिए, एक बटन जो आपको पृष्ठ के शीर्ष पर जाने की अनुमति देता है। उदाहरण के लिए - कुछ तत्वों की एनिमेटेड लोडिंग। मुझे यह सब अच्छा लगा, लेकिन करीब से निरीक्षण करने पर यह पता चला कि, उदाहरण के लिए, साइट वास्तव में सबसे तेज़ डिवाइस नहीं है। इसके अलावा, सबसे पहले मैंने साइट का विशेष रूप से लैपटॉप पर परीक्षण किया, इसलिए मैंने तुरंत इसके बारे में नहीं सीखा।

मेरे पास एक स्लाइडर घटक भी था, जिसे मैंने पृष्ठ पर इसके "वजन" के बारे में अधिक विचार किए बिना जोड़ा। मैंने इसे स्लाइड शो के लिए इस्तेमाल किया। जैसा कि यह बाद में पता चला, केवल इस स्लाइडर का कोड, एक संक्षिप्त रूप में, 30 Kb। फिर मैंने अपने दम पर एक स्लाइड शो के लिए एक घटक बनाने का फैसला किया। अंत में, इसका छोटा कोड, 25 KB का हो गया। इस वॉल्यूम में एक अच्छी एनीमेशन लाइब्रेरी और इशारों के साथ काम करने के लिए एक प्रणाली शामिल थी, जिसका उपयोग न केवल स्लाइड शो के लिए किया जा सकता है, बल्कि एप्लिकेशन के अन्य हिस्सों में भी किया जा सकता है। और ऐसा लगता है कि मैंने जो किया वह तीसरे पक्ष के समाधान से बहुत बेहतर है।

यहाँ NPM से एक स्लाइडर है।

एनपीएम स्लाइडर

यहाँ मेरा स्लाइडर है

स्व-विकसित स्लाइडर (जीवन में यह कम फ्रेम दर वाली इस जीआईएफ-छवि की तुलना में अधिक सुचारू रूप से काम करता है)

इस स्लाइडर को यहां देखें।

▍ बंडल आकार विश्लेषण

यदि आप create-react-app का उपयोग करते हैं, तो आपके लिए बंडल की संरचना का विश्लेषण करना बहुत आसान है। ऐसा करने के लिए, npx source-map-explorer "build/static/js/*.js" npm run build , और फिर npx source-map-explorer "build/static/js/*.js" । उसके बाद, बंडल की संरचना के बारे में जानकारी वाला एक पृष्ठ खुल जाएगा, जो नीचे दिखाया गया है।

बंडल जानकारी

परिणाम

जैसा कि आप देख सकते हैं, प्रतिक्रिया अनुप्रयोगों को तेज करना इतना मुश्किल नहीं है। यह सावधानीपूर्वक निगरानी करने के लिए पर्याप्त है कि वे किस चीज से निर्मित हैं, उनका परीक्षण करें और उनके लिए उपयुक्त परिवर्तन करें। यहां वह परियोजना है, जिसमें सुधार से पहले और उसके बाद यहां चर्चा की गई थी।

यदि आप प्रतिक्रिया अनुप्रयोगों के अनुकूलन में रुचि रखते हैं, तो इस विषय पर हमारे कुछ प्रकाशन हैं:

प्रिय पाठकों! क्या आपके पास रिएक्ट एप्लिकेशन के सफल (या असफल) अनुकूलन के उदाहरण हैं?

प्रतिक्रिया अनुप्रयोग त्वरण चार गुना