तपाईंको React वा Next.js एप एक-एक रिलीजमा ढिलो हुँदै गयो। बन्डल बढ्यो, छविहरू पूर्ण आकारमा पठाइन्छ, तेस्रो-पक्ष स्क्रिप्टले पहिलो पेन्टलाई रोक्छ, सूची प्रत्येक किस्ट्रोकमा पुन: रेन्डर हुन्छ। म ती मध्ये कुनले वास्तवमा तपाईंका प्रयोगकर्ताहरूको समय खर्च गर्छ भनेर मापन गर्छु, त्यसपछि समाधान गर्न लायककाहरूलाई ठीक गर्छु।
म तपाईंको React वा Next.js एपको प्रोफाइल बनाउनेछु र यसलाई संख्यासहित छिटो बनाउनेछु
तपाईंको एपको एक पृष्ठमा लाइटहाउस र प्रोफाइलर, प्रतिफलद्वारा क्रमबद्ध गरिएका निष्कर्षहरू।
- एक पृष्ठ प्रोफाइल गरिएको, श्रेणीबद्ध
अडिट, त्यसपछि संख्याहरू सार्ने समाधानहरू, अघि र पछि मापन गरियो।
- अडिट र मुख्य सुधारहरू
- स्रोत कोड
5 मार्गहरू, रेन्डरिङ र क्यासिङ, CI मा बन्डल बजेट, पूर्ण तुलना।
- गहिरो पास, 5 मार्गहरू सम्म
- स्रोत कोड
अनुकूलित प्रस्ताव अनुरोध गर्नुहोस्
अनुकूलित प्रस्ताव अनुरोध गर्न लग इन गर्नुहोस्
यो Zinner बाट व्यक्तिगत प्रस्ताव अनुरोध गर्न नि:शुल्क खाता सिर्जना गर्नुहोस् वा लग इन गर्नुहोस्।
लग इन / दर्ता गर्नुहोस्पूर्व-बिक्री प्रश्न सोध्नुहोस्
प्रश्न सोध्न लग इन गर्नुहोस्
प्लेटफर्म स्प्याम कम गर्न, पूर्व-बिक्री सन्देशहरू लग इन गरिएका प्रयोगकर्ताहरूले मात्र पठाउन सक्छन्।
यो Zinner लाई सिधै सन्देश पठाउन नि:शुल्क खाता सिर्जना गर्नुहोस् वा लग इन गर्नुहोस्।
लग इन / दर्ता गर्नुहोस्लग इन आवश्यक छ
यो Zinner लाई सन्देश पठाउन नि:शुल्क खाता सिर्जना गर्नुहोस् वा लग इन गर्नुहोस्।
लग इन / दर्ता गर्नुहोस्लग इन आवश्यक छ
निजीकृत प्रस्ताव अनुरोध गर्न नि:शुल्क खाता सिर्जना गर्नुहोस् वा लग इन गर्नुहोस्।
लग इन / दर्ता गर्नुहोस्एक नजरमा
तपाईंलाई निर्णय गर्न मद्दत गर्न यस सेवाको बारेमा मुख्य विवरणहरू। Zinn Hub द्वारा उत्पन्न, विक्रेता द्वारा होइन।
मूल्य स्थिति
Measurement Approach
कभर गरिएका फ्रेमवर्कहरू
Metrics Reported
वितरण विधि
तपाईंले के प्राप्त गर्नुहुनेछ
पूर्ण विवरण
यदि तपाईंलाई लाग्छ कि ढिलो पृष्ठहरूले तपाईंलाई साइनअप वा खोज ट्राफिकमा खर्च गरिरहेका छन् र तपाईंले आफूसँग भएको एप राख्न चाहनुहुन्छ भने यो अर्डर गर्नुहोस्। React र Next.js ले पहिले नै छिटो एपलाई चाहिने धेरै कुराहरू प्रदान गर्दछ, त्यसैले लाभहरू स्ट्याकहरू स्विच गर्नुको सट्टा ती उपकरणहरू राम्ररी प्रयोग गरेर आउँछन्।
तपाईंले संख्याहरू पाउनुहुन्छ, विशेषणहरू होइन: LCP, CLS, INP र प्रति मार्ग बन्डल साइज, एउटै थ्रोटल गरिएको जडानमा अघि र पछि मापन गरिएको, एउटै तालिकामा।
स्टार्टर एक पृष्ठको अडिट हो: रनहरू, प्रतिफलद्वारा क्रमबद्ध गरिएका निष्कर्षहरू, कुनै कोड परिवर्तन गरिएको छैन। मानकले त्यो अडिटबाट सुरु गर्छ र बाँकी समय ती संख्याहरू सार्ने समाधानहरूमा खर्च गर्छ। उन्नतले 5 मार्गहरूसम्म कभर गर्दछ, रेन्डरिङ र क्यासिङलाई ट्युन गर्दछ, र CI मा बन्डल बजेट छोड्छ ताकि अर्को रिलीजले चुपचाप कामलाई पूर्ववत गर्न सक्दैन।
काम तपाईंको भण्डारमा एउटा शाखामा हुन्छ, कमिट-बाइ-कमिट, प्रत्येकको आफ्नै कारण सहित। तपाईंले नभनेसम्म मद्वारा केही पनि डिप्लोय गरिँदैन।
कुनै कल छैन। सबै कुरा लिखित रूपमा, मलाई असहमत हुने मापनहरू सहित।
आफ्नो परियोजना पूरा गर्नका लागि चरणहरू
1. तपाईंका प्रयोगकर्ताहरूले वास्तवमा के पाउँछन् भन्ने कुरा नाप्नुहोस् - तपाईंको लाइभ पृष्ठहरूमा लाइटहाउस र ढिलो पृष्ठहरूमा थ्रोटल गरिएको जडानमा React प्रोफाइलर सत्र। LCP, CLS, INP र प्रति मार्ग बन्डल आकार, कुनै पनि कुरा छुनु अघि लेखिएको।
2. सबैभन्दा बढी खर्च केमा हुन्छ पत्ता लगाउनुहोस् - बन्डल र नेटवर्क वाटरफल: कसैले प्रयोग नगर्ने कुरा के पठाइन्छ, पहिलो पेन्टलाई के ले रोक्छ, कुन कम्पोनेन्टहरू पुन: रेन्डर हुन्छन् र किन। प्रत्येक खोजले मिलिसेकेन्ड वा किलोबाइटमा अनुमानित बचत बोक्छ।
3. यसलाई ठीक गर्नुहोस्, सबैभन्दा ठूलो जीत पहिले - कोड स्प्लिटिङ, छवि र फन्ट ह्यान्डलिङ, रेन्डर-ब्लकिङ कार्य, जहाँ प्रोफाइलरले सोध्छ त्यहाँ मेमोइजेसन, क्रिटिकल पाथबाट डाटा फेचिङ हटाइयो। प्रत्येक परिवर्तनको लागि एउटा कमिट, प्रत्येकको कारण सहित।
4. फेरि नाप्नुहोस्, सँगसँगै - परिवर्तन गरिएको बिल्डमा उही रनहरू: एउटै तालिकामा अघि र पछि, प्रति मार्ग र प्रति मेट्रिक। यदि कुनै परिवर्तनले केही खराब बनायो भने, तालिकाले त्यसो भन्छ र परिवर्तन फिर्ता जान्छ।
5. तपाईंको भण्डारमा हस्तान्तरण - तपाईंको भण्डारमा एउटा शाखा वा प्याच, रिपोर्ट, र मैले नगरेका कुराहरूको इमानदार सूची र यसको मूल्य कति हुनेछ। डिप्लोयमेन्ट तपाईंको हातमा रहन्छ।
Zinner गुणस्तर ग्यारेन्टी
प्लेटफर्ममा सामेल हुनु अघि प्रत्येक Zinner को समीक्षा र अनुमोदन गरिन्छ।
सबै सेवाहरू हाम्रो गुणस्तर आश्वासन प्रतिबद्धताद्वारा समर्थित छन्।
तपाईंले डेलिभर गरिएको काम अनुमोदन नगरेसम्म तपाईंको भुक्तानी सुरक्षित छ।
प्याकेजहरू तुलना गर्नुहोस्
| कार्य | स्टार्टर | मानक | उन्नत |
|---|---|---|---|
| वितरण समय | 2 दिन | 4 दिन | 8 दिन |
| पुनरावलोकनहरू | 0 | 2 | 3 |
| दायरा | एक पृष्ठ प्रोफाइल गरिएको, श्रेणीबद्ध | अडिट प्लस मुख्य समाधानहरू | गहिरो पास, 5 मार्गहरू सम्म |
| स्रोत कोड | ✕ | ✓ | ✓ |
पोर्टफोलियो
यस Zinn सँग सम्बन्धित विक्रेताको कामको उदाहरणहरू।
फर्मलाइन: स्ट्राइपको साथ Next.js स्टोर
तपाईंले क्लिक गर्न सक्ने स्टोरफ्रन्ट: 16 सङ्कलनमा 4 पोस्टरहरू, URL मा रहने फिल्टरहरू र खोज, एउटा कार्ट, हल्का र गाढा थिमहरू, र डेमो अर्डर वा परीक्षण मोडमा वास्तविक स्ट्राइप चेकआउट सत्रमा समाप्त हुने चेकआउट। मैले यसलाई Next.js स्थिर निर्यातको रूपमा टाइपस्क्रिप्टमा Tailwind CSS सँग बनाएको छु। कार्ड भुक्तानीहरू क्लाउडफ्लेयर वर्कर मार्फत जान्छन् जसले सर्भरमा कार्टको मूल्य पुन: निर्धारण गर्छ र स्ट्राइपको वेबहुक हस्ताक्षर प्रमाणित गर्छ।
Next.js मा द्विभाषी व्यक्तिगत साइट
अंग्रेजी र रूसीमा एक-पृष्ठ व्यक्तिगत साइट, सेवा खण्ड र मेरो डेमो परियोजनाहरूको लिङ्कहरू सहित। मैले यसलाई Next.js, React र TypeScript सँग स्थिर निर्यातको रूपमा डिजाइन र निर्माण गरेको छु, सादा CSS मोड्युलहरू र कुनै UI फ्रेमवर्क बिना स्टाइल गरिएको। यसमा हल्का र गाढा थिमहरू छन्, र प्रत्येक भाषाको लागि सामाजिक पूर्वावलोकन छवि निर्माण समयमा उत्पन्न हुन्छ। GitHub Actions ले यसलाई Bunny CDN मा निर्माण र डिप्लोय गर्छ, जसले सुरक्षा हेडरहरू थप्छ र www र सादा HTTP लाई मुख्य HTTPS ठेगानामा रिडिरेक्ट गर्छ।
सेवा विवरणहरू
बारम्बार सोधिने प्रश्नहरू
होइन, र तपाईंको कोड नदेखी यसको प्रतिज्ञा गर्ने जो कोहीसँग सावधान रहनुहोस्। एउटा चेकआउट विजेट वा विज्ञापन स्क्रिप्टले मैले जे गरे पनि स्कोरलाई सीमित गर्न सक्छ। अडिटले तपाईंलाई तपाईंको सीमा र यसमा पुग्न कति खर्च लाग्छ भनी बताउँछ।
होइन। Vite, CRA, Remix वा एक साधारण SPA सबै एउटै तरिकाले प्रोफाइल हुन्छन्। केवल फ्रेमवर्क-विशेष समाधानहरू फरक हुन्छन्: Next.js रेन्डरिङ मोडहरूको सट्टा मार्ग-स्तर स्प्लिटिङ र क्यासिङ।
हो। स्ट्यान्डर्ड उही अडिटबाट सुरु हुन्छ र बाँकी समय यसले फेला पारेका कुराहरू ठीक गर्न खर्च गर्छ। स्टार्टर आफैं काम गर्ने र कहाँ खन्नुपर्छ भनेर जान्न आवश्यक पर्ने टोलीहरूका लागि अवस्थित छ।
अडिटले त्यो देख्छ: सर्भर प्रतिक्रिया समय रेन्डर र स्क्रिप्ट लागतबाट छुट्टै देखिन्छ। API वा क्वेरीहरू प्रोफाइल गर्नु Node, Express, NestJS वा Rust मा एड-अन हो।
भण्डारमा पढ्ने पहुँच, वा स्रोतको अभिलेख, साथै पृष्ठको URL। स्ट्यान्डर्ड र एडभान्स्डमा म समाधानहरूलाई शाखामा पुश गर्छु, त्यसैले मलाई एउटा सिर्जना गर्ने अनुमति चाहिन्छ। यदि तपाईं दिन चाहनुहुन्न भने, म यसको सट्टा प्याच पठाउँछु। मलाई कहिल्यै डिप्लोय पहुँच चाहिँदैन।
तपाईंको लाइभ उत्पादन पृष्ठहरूमा पूर्वनिर्धारित रूपमा, ताकि संख्याहरू तपाईंको प्रयोगकर्ताहरूले पाउने कुरासँग मेल खान्छ। यदि पृष्ठ लगइन पछाडि छ वा अझै डिप्लोय गरिएको छैन भने, एक स्टेजिंग लिङ्क, एक परीक्षण खाता वा यसलाई स्थानीय रूपमा चलाउनका लागि चरणहरू सबै काम गर्छन्, र रिपोर्टले संख्याहरू कहाँबाट आएका हुन् भनी बताउँछ।
ग्राहक समीक्षाहरू
हाम्रा ग्राहकहरूले यस Zinn बारे के भन्छन् हेर्नुहोस्
श्रेणीहरू
Zinner नीतिहरू
सम्बन्धित Zinns
Node.js, Express, MongoDB, Firebase र MySQL सँग React JS वेब एप विकास गर्नुहोस्
वेबसाइट विकास र एआई च्याटबोट - फुल स्ट्याक रियाक्ट डेभलपर लन्डन
