ඔබේ React හෝ Next.js යෙදුම එක් නිකුතුවකින් පසු වේගය අඩු විය. බණ්ඩලය වර්ධනය විය, පින්තූර සම්පූර්ණ ප්රමාණයෙන් නැව්ගත කරයි, තෙවන පාර්ශවීය ස්ක්රිප්ට් එකක් පළමු තීන්ත අවහිර කරයි, සෑම යතුරු පහරකටම ලැයිස්තුවක් නැවත විදැහුම් කරයි. මේවායින් ඔබේ පරිශීලකයින්ට ඇත්ත වශයෙන්ම කාලය වැය වන්නේ කුමන ඒවාදැයි මම මැන බලමි, ඉන්පසු නිවැරදි කිරීමට වටින ඒවා නිවැරදි කරමි.
මම ඔබේ React හෝ Next.js යෙදුම පැතිකඩ කර එය සංඛ්යා සමඟ වේගවත් කරන්නෙමි
ඔබගේ යෙදුමේ එක් පිටුවක Lighthouse සහ profiler, ප්රතිලාභය අනුව ශ්රේණිගත කර ඇති සොයාගැනීම්.
- එක් පිටුවක් පැතිකඩ කර, ශ්රේණිගත කර ඇත
විගණනය, පසුව සංඛ්යා චලනය කරන නිවැරදි කිරීම්, පෙර සහ පසු මනිනු ලැබේ.
- විගණනය සහ ප්රධාන නිවැරදි කිරීම්
- මූලාශ්ර කේතය
5 මාර්ග දක්වා, විදැහුම්කරණය සහ හැඹිලිගත කිරීම, CI හි බණ්ඩල් අයවැයක්, සම්පූර්ණ සංසන්දනය.
- ගැඹුරු ගමන්, 5 මාර්ග දක්වා
- මූලාශ්ර කේතය
අභිරුචි දීමනාවක් ඉල්ලන්න
අභිරුචි දීමනාවක් ඉල්ලීමට පිවිසෙන්න
මෙම Zinner වෙතින් පුද්ගලීකරණය කළ දීමනාවක් ඉල්ලීමට නොමිලේ ගිණුමක් සාදන්න හෝ පිවිසෙන්න.
පිවිසෙන්න / ලියාපදිංචි වන්නපෙර-විකුණුම් ප්රශ්නයක් අසන්න
ප්රශ්නයක් ඇසීමට පිවිසෙන්න
වේදිකා ස්පෑම් අඩු කිරීම සඳහා, පෙර-විකුණුම් පණිවිඩ යැවිය හැක්කේ පිවිසී සිටින පරිශීලකයින්ට පමණි.
මෙම Zinner වෙත සෘජුවම පණිවිඩ යැවීමට නොමිලේ ගිණුමක් සාදන්න හෝ පිවිසෙන්න.
පිවිසෙන්න / ලියාපදිංචි වන්නපිවිසීම අවශ්යයි
මෙම Zinner වෙත පණිවිඩයක් යැවීමට නොමිලේ ගිණුමක් සාදන්න හෝ ලොග් වන්න.
පිවිසෙන්න / ලියාපදිංචි වන්නපිවිසීම අවශ්යයි
පුද්ගලීකරණය කළ පිරිනැමීමක් ඉල්ලීමට නොමිලේ ගිණුමක් සාදන්න හෝ ලොග් වන්න.
පිවිසෙන්න / ලියාපදිංචි වන්නඑක් බැල්මකින්
ඔබට තීරණය කිරීමට උපකාර වන මෙම සේවාව පිළිබඳ ප්රධාන විස්තර. Zinn Hub විසින් ජනනය කරන ලදී, විකුණුම්කරු විසින් නොවේ.
අගය පිහිටීම
Measurement Approach
ආවරණය කරන ලද රාමු
Metrics Reported
බෙදාහැරීමේ ක්රමය
ඔබට ලැබෙන දේ
සම්පූර්ණ විස්තරය
මන්දගාමී පිටු ඔබට ලියාපදිංචි කිරීම් හෝ සෙවුම් ගමනාගමනයට හානි කරන බව ඔබ සිතන්නේ නම් සහ ඔබට ඇති යෙදුම තබා ගැනීමට අවශ්ය නම් මෙය ඇණවුම් කරන්න. React සහ Next.js දැනටමත් වේගවත් යෙදුමකට අවශ්ය බොහෝ දේ සපයයි, එබැවින් වාසි ලැබෙන්නේ ස්ටැක් මාරු කිරීමෙන් නොව එම මෙවලම් හොඳින් භාවිතා කිරීමෙනි.
ඔබට ලැබෙන්නේ විශේෂණ පද නොව සංඛ්යා: LCP, CLS, INP සහ එක් එක් මාර්ගය සඳහා බණ්ඩල් ප්රමාණය, එකම තෙරපුම් සම්බන්ධතාවය මත පෙර සහ පසු මනිනු ලැබේ, එක් වගුවක.
ආරම්භකයා එක් පිටුවක විගණනයයි: ධාවන, ප්රතිලාභය අනුව ශ්රේණිගත කර ඇති සොයාගැනීම්, කේතයක් වෙනස් නොවේ. Standard එම විගණනයෙන් ආරම්භ වී ඉතිරි කාලය එම සංඛ්යා චලනය කරන නිවැරදි කිරීම් සඳහා වැය කරයි. Advanced 5 මාර්ග දක්වා ආවරණය කරයි, විදැහුම්කරණය සහ හැඹිලිගත කිරීම සුසර කරයි, සහ CI හි බණ්ඩල් අයවැයක් තබයි, එවිට ඊළඟ නිකුතුවට නිහඬව වැඩ අවලංගු කළ නොහැක.
වැඩ සිදුවන්නේ ඔබගේ ගබඩාවේ ශාඛාවක, කැපවීමෙන් කැපවීම, එක් එක් එහි හේතුව සමඟ. ඔබ ඉල්ලන්නේ නැතිනම් මා විසින් කිසිවක් යොදවන්නේ නැත.
ඇමතුම් නැත. මා සමඟ එකඟ නොවන මිනුම් ඇතුළුව සියල්ල ලිඛිතව.
ඔබේ ව්යාපෘතිය සම්පූර්ණ කිරීම සඳහා පියවර
1. ඔබේ පරිශීලකයන්ට සැබවින්ම ලැබෙන දේ මැන බලන්න - ඔබේ සජීවී පිටු මත Lighthouse සහ මන්දගාමී ඒවා මත React profiler සැසියක්, සීමා කරන ලද සම්බන්ධතාවක් මත. LCP, CLS, INP සහ එක් මාර්ගයකට බණ්ඩල් ප්රමාණය, කිසිවක් ස්පර්ශ කිරීමට පෙර ලියා ඇත.
2. වැඩිපුරම වියදම් වන දේ සොයා ගන්න - බණ්ඩලය සහ ජාල දිය ඇල්ල: කිසිවෙකු භාවිතා නොකරන දේ, පළමු තීන්ත අවහිර කරන දේ, කුමන සංරචක නැවත විදැහුම්කරණය කරන්නේද සහ ඇයි. සෑම සොයාගැනීමක්ම මිලි තත්පර හෝ කිලෝබයිට් වලින් ඇස්තමේන්තුගත ඉතිරියක් දරයි.
3. එය නිවැරදි කරන්න, විශාලතම ජයග්රහණය මුලින්ම - කේත බෙදීම, රූප සහ අකුරු හැසිරවීම, විදැහුම්කරණය අවහිර කරන වැඩ, profiler ඉල්ලා සිටින තැන මතක තබා ගැනීම, තීරණාත්මක මාර්ගයෙන් දත්ත ලබා ගැනීම. එක් වෙනසකට එක් commit එකක්, එක් එක් එහි හේතුව සමඟ.
4. නැවත මැන බලන්න, පැත්තෙන් පැත්තට - වෙනස් කරන ලද ගොඩනැගීම මත එකම ධාවනය: එක් වගුවක පෙර සහ පසු, එක් මාර්ගයකට සහ එක් මෙට්රික් එකකට. වෙනසක් යමක් නරක අතට හැරී ඇත්නම්, වගුව එය පවසන අතර වෙනස ආපසු යයි.
5. ඔබේ ගබඩාවේ භාරදීම - ඔබේ ගබඩාවේ ශාඛාවක් හෝ පැච් එකක්, වාර්තාව සහ මා නොකළ දේ සහ එහි වටිනාකම පිළිබඳ අවංක ලැයිස්තුවක්. යෙදවීම ඔබේ අතේ පවතී.
Zinner තත්ත්ව සහතිකය
සෑම Zinner කෙනෙකුම වේදිකාවට සම්බන්ධ වීමට පෙර සමාලෝචනය කර අනුමත කරනු ලැබේ.
සියලුම සේවාවන් අපගේ තත්ත්ව සහතික කිරීමේ කැපවීම මගින් සහාය වේ.
ඔබ භාර දුන් කාර්යය අනුමත කරන තෙක් ඔබේ ගෙවීම ආරක්ෂා කර ඇත.
පැකේජ සසඳන්න
| කාර්යය | ආරම්භක | සම්මත | උසස් |
|---|---|---|---|
| භාරදීමේ වේලාව | 2 දින | 4 දින | 8 දින |
| සංශෝධන | 0 | 2 | 3 |
| විෂය පථය | එක් පිටුවක් පැතිකඩ කර, ශ්රේණිගත කර ඇත | විගණනය සහ ප්රධාන නිවැරදි කිරීම් | ගැඹුරු ගමන්, 5 මාර්ග දක්වා |
| මූලාශ්ර කේතය | ✕ | ✓ | ✓ |
පෝට්ෆෝලියෝ
මෙම Zinn ට අදාළ විකුණුම්කරුගේ වැඩ පිළිබඳ උදාහරණ.
ෆෝම්ලයින්: Stripe සමඟ Next.js වෙළඳසැල
ඔබට ක්ලික් කළ හැකි වෙළඳසැලක්: 16 එකතු කිරීම් වල 4 පෝස්ටර්, URL එකේ රැඳී සිටින පෙරහන් සහ සෙවීම්, කරත්තයක්, සැහැල්ලු සහ අඳුරු තේමා, සහ demo ඇණවුමකින් හෝ පරීක්ෂණ මාදිලියේ සැබෑ Stripe Checkout සැසියකින් අවසන් වන පිටවීමක්. මම එය Next.js ස්ථිතික අපනයනයක් ලෙස TypeScript සමඟ Tailwind CSS භාවිතයෙන් ගොඩනඟා ඇත. කාඩ්පත් ගෙවීම් Cloudflare Worker හරහා සිදු වන අතර එය සේවාදායකයේ කරත්තය නැවත මිල කර Stripe හි webhook අත්සන තහවුරු කරයි.
Next.js හි ද්විභාෂා පුද්ගලික වෙබ් අඩවිය
ඉංග්රීසි සහ රුසියානු භාෂාවලින් එක් පිටුවක පුද්ගලික වෙබ් අඩවියක්, සේවා අංශයක් සහ මගේ demo ව්යාපෘති වෙත සබැඳි සමඟින්. මම එය Next.js, React සහ TypeScript සමඟ ස්ථිතික අපනයනයක් ලෙස නිර්මාණය කර ගොඩනඟා ඇත, සරල CSS මොඩියුල සහ UI රාමුවක් නොමැතිව. එයට සැහැල්ලු සහ අඳුරු තේමා ඇති අතර, එක් එක් භාෂාව සඳහා සමාජ පෙරදසුන් රූපයක් ගොඩනැගීමේදී ජනනය වේ. GitHub Actions එය Bunny CDN වෙත ගොඩනඟා යොදවයි, එය ආරක්ෂක ශීර්ෂයන් එක් කරන අතර www සහ සරල HTTP ප්රධාන HTTPS ලිපිනයට හරවා යවයි.
සේවා විස්තර
නිතර අසන ප්රශ්න
නැත, ඔබේ කේතය දැකීමට පෙර එය පොරොන්දු වන ඕනෑම අයෙකු සමඟ ප්රවේශම් වන්න. චෙක්අවුට් විජට් එකක් හෝ දැන්වීම් ස්ක්රිප්ට් එකක් මා කුමක් කළත් ලකුණු සීමා කළ හැකිය. විගණනය ඔබට ඔබේ සීමාව සහ එයට ළඟා වීමට යන වියදම පවසයි.
නැත. Vite, CRA, Remix හෝ සරල SPA සියල්ලම එකම ආකාරයකින් පැතිකඩ කරයි. රාමු-විශේෂිත නිවැරදි කිරීම් පමණක් වෙනස් වේ: Next.js විදැහුම්කරණ මාතයන් වෙනුවට මාර්ග-මට්ටමේ බෙදීම සහ හැඹිලිගත කිරීම.
ඔව්. Standard එකම විගණනයකින් ආරම්භ වන අතර ඉතිරි කාලය එය සොයාගත් දේ නිවැරදි කිරීමට වැය කරයි. Starter පවතින්නේ තමන් විසින්ම වැඩ කරන සහ හාරා බැලිය යුත්තේ කොතැනදැයි දැන ගැනීමට අවශ්ය කණ්ඩායම් සඳහාය.
විගණනය එය දකී: සේවාදායක ප්රතිචාර කාලය විදැහුම්කරණය සහ ස්ක්රිප්ට් පිරිවැයෙන් වෙන වෙනම පෙන්වයි. API හෝ විමසුම් පැතිකඩ කිරීම Node, Express, NestJS හෝ Rust හි අතිරේකයකි.
ගබඩාවට කියවීමේ ප්රවේශය, හෝ මූලාශ්රයේ සංරක්ෂිතයක්, පිටුවේ URL එක සමඟ. Standard සහ Advanced මත මම නිවැරදි කිරීම් ශාඛාවකට තල්ලු කරමි, එබැවින් මට එකක් සෑදීමට අවසර අවශ්ය වේ. ඔබට එය ලබා දීමට අවශ්ය නැතිනම්, මම ඒ වෙනුවට පැච් එකක් එවන්නෙමි. මට කිසි විටෙකත් යෙදවීමේ ප්රවේශය අවශ්ය නොවේ.
පෙරනිමියෙන් ඔබේ සජීවී නිෂ්පාදන පිටු මත, එවිට අංක ඔබේ පරිශීලකයන්ට ලැබෙන දේට ගැලපේ. පිටුව පිවිසුමක් පිටුපස හෝ තවමත් යොදවා නොමැති නම්, වේදිකාගත කිරීමේ සබැඳියක්, පරීක්ෂණ ගිණුමක් හෝ එය දේශීයව ධාවනය කිරීමට පියවර සියල්ල ක්රියාත්මක වන අතර, අංක පැමිණෙන්නේ කුමන එකකින්දැයි වාර්තාව පවසයි.
පාරිභෝගික සමාලෝචන
මෙම Zinn ගැන අපගේ පාරිභෝගිකයින් පවසන දේ බලන්න
ප්රවර්ග
Zinner ප්රතිපත්ති
අදාළ Zinns
