VueJS + Nuxt पर एसपीए विकास का अनुभव

हमारी कंपनी मुख्य रूप से ऑनलाइन स्टोर के विकास में लगी हुई है और हम VueJS + Nuxt + Laravel के एक समूह पर एक परियोजना विकसित करने में अपना अनुभव साझा करना चाहते हैं।

लेख में चर्चा होगी कि हमने एक एसपीए के रूप में ऑनलाइन स्टोर को कैसे लागू करने का फैसला किया: हम इस पर कैसे आए, कठिनाइयों, सहजता।

जिस साइट पर चर्चा की जाएगी वह एक कैटलॉग, फिल्टर, खोज, टोकरी, व्यक्तिगत खाते के साथ एक लगभग ऑनलाइन स्टोर है यानी। लगभग सब कुछ जो स्टोर में हो सकता है। परियोजना में कानूनी संस्थाओं और व्यक्तियों के लिए एक अलग तर्क, मूल्य निर्धारण और मानचित्रण है।

क्यों एसपीए

वर्तमान परियोजना से पहले, एकल-पृष्ठ अनुप्रयोगों को विकसित करने में हमारे अनुभव में केवल कुछ आंतरिक परियोजनाएं शामिल थीं। और कई मायनों में, हमारे लिए एसपीए, एक अर्थ में, एक अंधेरा घोड़ा था।

परियोजना की वृद्धि, इसके एसईओ-प्रचार और स्थिरता से जुड़ी समस्याओं की कोई स्पष्ट समझ नहीं थी, जब, सामान्य साइटों के निर्माण में अनुभव और लंबे समय से चल रही प्रक्रियाओं के रूप में, उन्होंने इन समस्याओं को हल करने में कोई सवाल नहीं उठाया।

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

खिड़की के बाहर गर्मियों 2017 है। ट्विटर पर और मध्यम पर, विवाद कम नहीं होते हैं, जो अभी भी बेहतर है, प्रतिज्ञा या प्रतिक्रिया। हमारे कार्यालय ने इस प्रवृत्ति को पारित नहीं किया। डेवलपर्स भी दो शिविरों में विभाजित होते हैं, प्रत्येक अपने स्वयं के तर्कों के साथ। इससे पहले, हम में से प्रत्येक ने पहले ही दोनों तकनीकों के साथ काम किया है।
कोई jsx के करीब हो गया है, कोई अधिक परिचित html या पग पसंद करता है, किसी का मानना ​​है कि अपरिवर्तनीयता बेहतर स्थिति को मॉनिटर करने और एप्लिकेशन की स्थिति का प्रबंधन करने में मदद करती है, कुछ के लिए यह एक जटिलता है। दूसरी ओर, प्रत्येक रूपरेखा हमें एकल-फ़ाइल घटकों को बनाने का अवसर देती है, और दोनों के लिए हमारे लिए सभी आवश्यक कार्यों के एक सेट के साथ पहले से ही काफी स्थिर पुस्तकालय हैं (एसएसआर, वैश्विक राज्य प्रबंधन, मार्ग, मेटा डेटा प्रबंधन)। प्रतिक्रिया के लिए यह नेक्स्टज है, और इसके लिए यह न्यूक्स्टज है। चयन के समय Nuxt अभी भी बीटा में था, लेकिन काफी स्थिर था। क्योंकि विकास प्रक्रिया इस तरह से बनाई गई थी कि हमारे पास शुरू में एक लेआउट हो, और फिर बैकएंड भाग का निर्माण करें और पृष्ठों के लेआउट को फ्रंटेंड में स्थानांतरित करें, फ्रेमवर्क का विकल्प काफी सरल था। हमने vue और nuxtjs को चुना, क्योंकि यह साइट बनाने और समानांतर में एपीआई लॉन्च करने का निर्णय लिया गया था। इस दृष्टिकोण के साथ, घटकों को तुरंत रचना करना और उनमें तर्क जोड़ना सुविधाजनक है। हमारे लेआउट डिजाइनरों ने अपने सामान्य HTML बनाने के लिए एक निकट दृष्टिकोण लिया।

बैकएंड के बारे में थोड़ा सा

सर्वर समाधान के संदर्भ में और सामान्य रूप से बैकएंड के निर्माण के लिए प्रौद्योगिकियों का विकल्प, हम अधिक परिचित तरीके से गए। भाषा को php चुना गया था, जिसके लिए हम लार्वा फ्रेमवर्क का उपयोग करते हैं। यह सब नगनेक्स पर घूमता है। डेटाबेस समाधान के रूप में हमारे पास mysql है।

विकास की शुरुआत, उपयोग किए गए पैकेज और समस्याएं

Nuxt हमें एप्लिकेशन स्टेट (vuex) और रूटिंग (vue-router) का प्रबंधन करने के लिए पूरी तरह से संतोषजनक पैकेज प्रदान करता है। इसलिए, परियोजना को इकट्ठा करना शुरू करना और घटकों को तर्क को बन्धन तुरंत शुरू कर सकता है, और फिर, आवश्यकतानुसार, उन पैकेजों की तलाश करें जिनकी हमें ज़रूरत है। सबसे पहले, ज़ाहिर है, मुझे बैकएंड भाग के साथ संवाद करने के लिए एक समाधान की आवश्यकता थी। ऐसा करने के लिए, axios चुना गया था, मानक पहले से ही सभी के लिए, और उस पर nuxt- अक्षीय-मॉड्यूल आवरण। हम तुरंत प्रोजेक्ट को पर्यावरण में खो जाने और वांछित कॉन्फ़िगरेशन के साथ प्रत्येक वातावरण में चलाने में मदद नहीं करते हैं - dotenv और nuxt-dotenv-मॉड्यूल आवरण का चयन करें। विकास शुरू करने के लिए, यह पर्याप्त है और लेआउट प्रक्रिया शुरू हो गई है।

पहला ठहराव तब हुआ जब लेआउट में एक छवि स्लाइडर को जोड़ना आवश्यक था। "मेरा स्लीक-स्लाइडर कहाँ है, मुझे चाहिए jquery" कमरे के लेआउट पक्ष से सुना गया था। तैयार किए गए समाधानों की त्वरित समीक्षा से हमारे लिए उपयुक्त कई स्लाइडर्स का पता चला। लेकिन लगभग हर कोई एक निर्भरता के साथ घसीट के रूप में घसीटा, जिसे मैं तैयार बंडल में जोड़ना नहीं चाहता था, जिससे इसका आकार बढ़ गया। कुछ पैकेज सर्वर रेंडरिंग का समर्थन नहीं करते थे, जो हमारे लिए भी महत्वपूर्ण था। नतीजतन, विकल्प भयानक-स्विपर पर गिर गया, जो पूरी तरह से हमारी आवश्यकताओं को पूरा करता था और यहां तक ​​कि थोड़ा और भी। स्लाइडर को बोल्ट किए जाने के बाद, हमारे लेआउट डिजाइनर लंबे समय तक नुकसान में रहे। “क्या यह सब, क्या मुझे कुछ और करना है? बस छवियों की एक सूची निर्दिष्ट करें और यह काम करता है? "

इसके बाद तारीखों के चयन के लिए घटक का विकल्प आया। किस्मत ज्यादा थी हमारे प्यारे फ्लैटपिकर के लिए एक आवरण जल्दी से मिल गया था। जो कुछ रह गया था, उसे थोड़ा स्टाइल करना था।

साइट पर कई स्थानों पर एक नक्शा है। लेकिन, क्योंकि हमें सही विस्तार और नक्शे के विस्तार की आवश्यकता नहीं थी, सेवाओं के बीच कोई विकल्प नहीं था। फिर भी, विकास के समय, और अब भी, कोई समाधान नहीं है जो आदर्श रूप से हमारी सभी जरूरतों को पूरा करता है। सभी पेशेवरों और विपक्षों के आधार पर, Google मानचित्र और vue2-google-map आवरण को चुना गया था। पैकेज काफी बड़ा है और हमारे लिए बहुत सारे अनावश्यक खींचता है, लेकिन यह अपनी समस्याओं को अच्छी तरह से हल करता है।

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

इन पैकेजों ने हमारी लगभग सभी आवश्यकताओं को कवर किया। जो कुछ भी था वह घटक के बाहर क्लिक को ट्रैक करने के लिए था, जो vue-click-बाहर मदद करता था। हमने vue-backtotop का उपयोग करते हुए पृष्ठ के तेजी से स्क्रॉलिंग को लागू किया। तारीखों के साथ काम करने के लिए, पल का उपयोग करें।

अंतिम बंडल आकार और 1 मेगाबाइट कहां से आया

यह ध्यान में रखा जाना चाहिए कि पैकेज चुनते समय एक महत्वपूर्ण मानदंड उनका वजन था।

परियोजना के मध्य में, हमने अंतिम परियोजना का विश्लेषण करने और विधानसभा आयामों को देखने का निर्णय लिया। परिणाम, इसे हल्के ढंग से, आश्चर्यचकित करने वाले थे। App.js गिरोह का आकार 950kb gzip से अधिक था। एनपीएम रन विश्लेषण टीम ने हमें सभी मॉड्यूलों के आकार के साथ एक सुंदर ग्राफ लाया, जिससे हमें पता चला कि कुछ मॉड्यूल jquery, lodash, आदि के रूप में अनावश्यक निर्भरता खींच रहे हैं। उन्हें इन पैकेजों से इनकार करना पड़ा और उनके लिए एक विकल्प खोजना पड़ा। वर्तमान में, पूरे बंडल का आकार 480kb गज़िप है।



निर्भरता के लिए देखें और समय-समय पर अपने आवेदन के आकार की जांच करें।

प्रारंभिक लोडिंग पृष्ठ और एपीआई द्वारा प्राप्त डेटा

क्लाइंट को लोड करने से पहले सर्वर पर डेटा के साथ स्टोर को आबाद करने के लिए Nuxt एक सुविधाजनक अवसर प्रदान करता है। इसके लिए, कार्रवाई nuxtServerInit का उपयोग किया जाता है। यह हमारे लिए इस तरह दिखता है:



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

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

स्मृति लीक

कुछ समय बाद, हमारे परीक्षण सर्वर पर आवेदन, हम स्मृति की खपत में एक अप्राकृतिक वृद्धि का निरीक्षण करने लगे। pm2 ने सभी सर्वर मेमोरी के 90% तक कब्जा कर लिया और एप्लिकेशन समय-समय पर क्रैश हो गया। Github पृष्ठ पर nuxt ने पहले ही समस्या के साथ कुछ समस्याएँ दीं।

समस्या तब उत्पन्न हुई जब हमने अपने पृष्ठों के एसिंक्शडाट विधि में कई अनुरोध किए।



सौभाग्य से, nuxt डेवलपर्स ने इस समस्या को जल्दी से हल कर दिया, और वर्तमान में यह प्रक्रिया लगभग 40mb मेमोरी का उपभोग करती है।

दिलचस्प समस्याएं और उनके समाधान

घटक लेख
साइट नियंत्रण कक्ष में, लेखों को जोड़ना और विभिन्न सामग्रियों को लेख सामग्री में सम्मिलित करना संभव है, उदाहरण के लिए, माल के साथ एक ब्लॉक।



सर्वर से आने वाला HTML कुछ इस तरह दिखता है:



$ उत्पाद -4 इंगित करता है कि पहचानकर्ता 4 के साथ Product.vue घटक इस सूचक के स्थान पर होना चाहिए। Vue हमें रेंडर विधि का उपयोग करके घटक प्रदान करने के लिए व्यापक संभावनाएं प्रदान करता है। सबसे पहले, हम html में घटकों के लिए पॉइंटर्स के सभी संदर्भों की तलाश करते हैं जो आ गए हैं और हम इस घटक को प्रदर्शित करने के लिए आवश्यक डेटा को एपीआई द्वारा प्राप्त करते हैं। अगला, हमने पूरे HTML को एक पेड़ में विभाजित किया। हिमालय पुस्तकालय ने हमें इसमें मदद की। और फिर हम तैयार किए गए घटकों के साथ पॉइंटर्स को प्रतिस्थापित करके html वापस इकट्ठा करते हैं।

... और एक लेख लिखने के लिए पर्याप्त ताकत नहीं थी) उन्होंने परियोजना के विकास के दौरान 2017 की गर्मियों में लेख लिखना शुरू किया, और यह पहले से ही 2018 की गर्मियों में यार्ड में शुरू किया गया है, परियोजना शुरू नहीं हुई है और लेख जारी नहीं किया गया है।
इसलिए, हम प्रकाशित करते हैं कि हमने क्या इकट्ठा किया है, लेकिन हमारे पास अभी भी कई दिलचस्प विषय और अवलोकन हैं।
यदि यह दिलचस्प होगा - लिखो, जैसे इसे)) खैर, इसके बारे में सुनने के लिए और क्या दिलचस्प होगा, कि आप चूक गए।

मैं कहना चाहता हूं कि यह परियोजना लगभग 4 महीने से काम कर रही है। इसके साथ कोई विशेष समस्या नहीं थी, और साइट की गति प्रभावशाली है और इसे अन्य दुकानों से अलग करती है।