កម្មវិធី React ឬ Next.js របស់អ្នកកាន់តែយឺតមួយកំណែម្ដងៗ។ កញ្ចប់បានរីកធំ រូបភាពត្រូវបានបញ្ជូនក្នុងទំហំពេញ ស្គ្រីបភាគីទីបីរារាំងការបង្ហាញដំបូង បញ្ជីមួយត្រូវបានបង្ហាញឡើងវិញរាល់ពេលចុចគ្រាប់ចុច។ ខ្ញុំវាស់ស្ទង់ថាតើមួយណាដែលពិតជាចំណាយពេលអ្នកប្រើប្រាស់របស់អ្នក បន្ទាប់មកជួសជុលអ្វីដែលគួរជួសជុល។
ខ្ញុំនឹងកំណត់ទម្រង់កម្មវិធី React ឬ Next.js របស់អ្នក ហើយធ្វើឱ្យវាកាន់តែលឿន ជាមួយនឹងលេខ
Lighthouse និង profiler នៅលើទំព័រមួយនៃកម្មវិធីរបស់អ្នក លទ្ធផលត្រូវបានចាត់ថ្នាក់តាមការទូទាត់។
- ទំព័រមួយត្រូវបានកំណត់ទម្រង់ ត្រូវបានចាត់ថ្នាក់
ការត្រួតពិនិត្យ បន្ទាប់មកការជួសជុលដែលផ្លាស់ប្តូរលេខ ដែលវាស់វែងមុន និងក្រោយ។
- ការត្រួតពិនិត្យបូកនឹងការជួសជុលសំខាន់ៗ
- កូដប្រភព
រហូតដល់ 5 ផ្លូវ ការបង្ហាញ និងការឃ្លាំងសម្ងាត់ ថវិកា bundle នៅក្នុង CI ការប្រៀបធៀបពេញលេញ។
- ការឆ្លងកាត់ជ្រៅ រហូតដល់ 5 ផ្លូវ
- កូដប្រភព
ស្នើសុំការផ្តល់ជូនផ្ទាល់ខ្លួន
ចូលគណនីដើម្បីស្នើសុំការផ្តល់ជូនផ្ទាល់ខ្លួន
បង្កើតគណនីឥតគិតថ្លៃ ឬចូលគណនីដើម្បីស្នើសុំការផ្តល់ជូនផ្ទាល់ខ្លួនពី Zinner នេះ។
ចូល / ចុះឈ្មោះសួរសំណួរមុនពេលលក់
ចូលដើម្បីសួរសំណួរ
ដើម្បីកាត់បន្ថយសារឥតបានការនៅលើវេទិកា សារមុនពេលលក់អាចត្រូវបានផ្ញើដោយអ្នកប្រើប្រាស់ដែលបានចូលប៉ុណ្ណោះ។
បង្កើតគណនីឥតគិតថ្លៃ ឬចូលដើម្បីផ្ញើសារទៅ Zinner នេះដោយផ្ទាល់។
ចូល / ចុះឈ្មោះនៅ glance
ព័ត៌មានលម្អិតសំខាន់ៗអំពីសេវាកម្មនេះ ដើម្បីជួយអ្នកសម្រេចចិត្ត។ បង្កើតដោយ Zinn Hub មិនមែនអ្នកលក់ទេ។
ទីតាំងតម្លៃ
Measurement Approach
ក្របខ័ណ្ឌដែលគ្របដណ្តប់
Metrics Reported
វិធីសាស្រ្តដឹកជញ្ជូន
អ្វីដែលអ្នកនឹងទទួលបាន
ការពិពណ៌នាពេញលេញ
បញ្ជាទិញនេះ ប្រសិនបើអ្នកគិតថាទំព័រយឺតកំពុងធ្វើឱ្យអ្នកខាតបង់ការចុះឈ្មោះ ឬចរាចរណ៍ស្វែងរក ហើយអ្នកចង់រក្សាកម្មវិធីដែលអ្នកមាន។ React និង Next.js បានផ្តល់នូវអ្វីដែលកម្មវិធីលឿនត្រូវការរួចហើយ ដូច្នេះការទទួលបានមកពីការប្រើប្រាស់ឧបករណ៍ទាំងនោះបានល្អ ជាជាងការប្តូរ stacks។
អ្នកទទួលបានលេខ មិនមែនគុណនាមទេ៖ LCP, CLS, INP និងទំហំ bundle ក្នុងមួយផ្លូវ ដែលវាស់វែងមុន និងក្រោយនៅលើការតភ្ជាប់ដែលត្រូវបានរឹតបន្តឹងដូចគ្នា ក្នុងតារាងមួយ។
Starter គឺជាការត្រួតពិនិត្យទំព័រមួយ៖ ការដំណើរការ លទ្ធផលដែលត្រូវបានចាត់ថ្នាក់តាមការទូទាត់ គ្មានកូដត្រូវបានផ្លាស់ប្តូរទេ។ Standard ចាប់ផ្តើមពីការត្រួតពិនិត្យនោះ ហើយចំណាយពេលដែលនៅសល់លើការជួសជុលដែលផ្លាស់ប្តូរលេខទាំងនោះ។ Advanced គ្របដណ្តប់រហូតដល់ 5 ផ្លូវ កែសម្រួលការបង្ហាញ និងការឃ្លាំងសម្ងាត់ ហើយទុកថវិកា bundle នៅក្នុង CI ដូច្នេះការចេញផ្សាយបន្ទាប់មិនអាចលុបចោលការងារដោយស្ងៀមស្ងាត់បានទេ។
ការងារកើតឡើងនៅលើសាខានៅក្នុងឃ្លាំងរបស់អ្នក ការប្តេជ្ញាចិត្តម្តងមួយៗ នីមួយៗមានហេតុផលរបស់វា។ គ្មានអ្វីត្រូវបានដាក់ពង្រាយដោយខ្ញុំទេ លុះត្រាតែអ្នកស្នើសុំវា។
គ្មានការហៅទូរស័ព្ទ។ អ្វីគ្រប់យ៉ាងជាលាយលក្ខណ៍អក្សរ រួមទាំងការវាស់វែងដែលមិនយល់ស្របជាមួយខ្ញុំ។
ជំហានសម្រាប់បញ្ចប់គម្រោងរបស់អ្នក
1. វាយតម្លៃអ្វីដែលអ្នកប្រើប្រាស់របស់អ្នកទទួលបានពិតប្រាកដ - Lighthouse នៅលើទំព័រផ្ទាល់របស់អ្នក និងវគ្គ React profiler នៅលើទំព័រយឺតៗ លើការតភ្ជាប់ដែលបានកំណត់។ LCP, CLS, INP និងទំហំកញ្ចប់ក្នុងមួយផ្លូវ ដែលបានកត់ត្រាមុនពេលប៉ះអ្វីទាំងអស់។
2. ស្វែងរកអ្វីដែលចំណាយច្រើនបំផុត - កញ្ចប់ និងបណ្តាញទឹកជ្រោះ៖ អ្វីដែលដឹកជញ្ជូនដែលគ្មាននរណាម្នាក់ប្រើប្រាស់ អ្វីដែលរារាំងការគូរដំបូង ធាតុផ្សំណាដែលបង្ហាញឡើងវិញ និងមូលហេតុ។ រាល់ការរកឃើញនីមួយៗមានការសន្សំប៉ាន់ស្មានជាមីលីវិនាទី ឬគីឡូបៃ។
3. ជួសជុលវា ទទួលបានជោគជ័យធំបំផុតមុនគេ - ការបំបែកកូដ ការគ្រប់គ្រងរូបភាព និងពុម្ពអក្សរ ការងាររារាំងការបង្ហាញ ការចងចាំដែល profiler ស្នើសុំ ការទាញយកទិន្នន័យដែលបានផ្លាស់ប្តូរចេញពីផ្លូវសំខាន់។ ការប្តេជ្ញាចិត្តមួយក្នុងមួយការផ្លាស់ប្តូរ នីមួយៗមានហេតុផលរបស់វា។
4. វាយតម្លៃម្តងទៀត ពីមួយទៅមួយ - ការដំណើរការដូចគ្នានៅលើការបង្កើតដែលបានផ្លាស់ប្តូរ៖ មុន និងក្រោយក្នុងតារាងមួយ ក្នុងមួយផ្លូវ និងក្នុងមួយម៉ែត្រ។ ប្រសិនបើការផ្លាស់ប្តូរធ្វើឱ្យអ្វីមួយកាន់តែអាក្រក់ តារាងនឹងបង្ហាញដូច្នេះ ហើយការផ្លាស់ប្តូរនឹងត្រឡប់ទៅវិញ។
5. ប្រគល់នៅក្នុងឃ្លាំងរបស់អ្នក - សាខា ឬបំណះនៅក្នុងឃ្លាំងរបស់អ្នក របាយការណ៍ និងបញ្ជីដ៏ស្មោះត្រង់នៃអ្វីដែលខ្ញុំមិនបានធ្វើ និងអ្វីដែលវាមានតម្លៃ។ ការដាក់ពង្រាយនៅតែស្ថិតក្នុងដៃរបស់អ្នក។
ការធានាគុណភាព Zinner
Zinner គ្រប់រូបត្រូវបានត្រួតពិនិត្យ និងអនុម័តមុនពេលចូលរួមវេទិកា។
សេវាកម្មទាំងអស់ត្រូវបានគាំទ្រដោយការប្តេជ្ញាចិត្តធានាគុណភាពរបស់យើង។
ការទូទាត់របស់អ្នកត្រូវបានការពាររហូតដល់អ្នកអនុម័តការងារដែលបានប្រគល់។
ប្រៀបធៀបកញ្ចប់
| មុខងារ | អ្នកចាប់ផ្តើម | ស្តង់ដារ | កម្រិតខ្ពស់ |
|---|---|---|---|
| ពេលវេលាដឹកជញ្ជូន | 2 ថ្ងៃ | 4 ថ្ងៃ | 8 ថ្ងៃ |
| ការកែប្រែ | 0 | 2 | 3 |
| វិសាលភាព | ទំព័រមួយត្រូវបានវិភាគ ត្រូវបានចាត់ថ្នាក់ | ការត្រួតពិនិត្យបូកនឹងការជួសជុលសំខាន់ៗ | ការឆ្លងកាត់ស៊ីជម្រៅ រហូតដល់ 5 ផ្លូវ |
| កូដប្រភព | ✕ | ✓ | ✓ |
ផលប័ត្រ
ឧទាហរណ៍នៃការងាររបស់អ្នកលក់ដែលទាក់ទងនឹង Zinn នេះ។
Formline: ហាង Next.js ជាមួយ Stripe
ហាងលក់ទំនិញដែលអ្នកអាចចុចបាន៖ ផ្ទាំងរូបភាព 16 នៅក្នុងការប្រមូល 4 តម្រង និងការស្វែងរកដែលនៅតែមាននៅក្នុង URL រទេះទំនិញ ស្បែកស្រាល និងងងឹត និងការទូទាត់ដែលបញ្ចប់ដោយការបញ្ជាទិញសាកល្បង ឬវគ្គ Stripe Checkout ពិតប្រាកដនៅក្នុងរបៀបសាកល្បង។ ខ្ញុំបានបង្កើតវាជាការនាំចេញឋិតិវន្ត Next.js នៅក្នុង TypeScript ជាមួយ Tailwind CSS ។ ការទូទាត់កាតឆ្លងកាត់ Cloudflare Worker ដែលកំណត់តម្លៃរទេះទំនិញឡើងវិញនៅលើម៉ាស៊ីនមេ និងផ្ទៀងផ្ទាត់ហត្ថលេខា webhook របស់ Stripe ។
គេហទំព័រផ្ទាល់ខ្លួនពីរភាសានៅក្នុង Next.js
គេហទំព័រផ្ទាល់ខ្លួនមួយទំព័រជាភាសាអង់គ្លេស និងរុស្ស៊ី ជាមួយនឹងផ្នែកសេវាកម្ម និងតំណភ្ជាប់ទៅកាន់គម្រោងសាកល្បងរបស់ខ្ញុំ។ ខ្ញុំបានរចនា និងបង្កើតវាជាមួយ Next.js, React និង TypeScript ជាការនាំចេញឋិតិវន្ត ដែលរចនាប័ទ្មជាមួយ CSS Modules ធម្មតា និងគ្មានក្របខ័ណ្ឌ UI ។ វាមានស្បែកស្រាល និងងងឹត ហើយរូបភាពមើលជាមុនសម្រាប់បណ្តាញសង្គមសម្រាប់ភាសានីមួយៗត្រូវបានបង្កើតឡើងនៅពេលបង្កើត។ GitHub Actions បង្កើត និងដាក់ពង្រាយវាទៅ Bunny CDN ដែលបន្ថែមបឋមកថា 보안 និងប្តូរទិស www និង HTTP ធម្មតាទៅកាន់អាសយដ្ឋាន HTTPS សំខាន់។
ព័ត៌មានលម្អិតសេវាកម្ម
សំណួរដែលសួរញឹកញាប់
ទេ ហើយត្រូវប្រយ័ត្នចំពោះអ្នកណាដែលសន្យាវា មុនពេលឃើញកូដរបស់អ្នក។ ធាតុក្រាហ្វិកពិនិត្យចេញ ឬស្គ្រីបផ្សាយពាណិជ្ជកម្មអាចកំណត់ពិន្ទុមិនថាខ្ញុំធ្វើអ្វីនោះទេ។ ការត្រួតពិនិត្យប្រាប់អ្នកពីកម្រិតខ្ពស់បំផុតរបស់អ្នក និងអ្វីដែលត្រូវចំណាយដើម្បីទៅដល់វា។
ទេ វីតេ (Vite), CRA, Remix ឬ SPA ធម្មតាទាំងអស់វិភាគតាមរបៀបដូចគ្នា។ មានតែការជួសជុលជាក់លាក់តាមក្របខ័ណ្ឌប៉ុណ្ណោះដែលខុសគ្នា៖ ការបំបែកកម្រិតផ្លូវ និងការឃ្លាំងសម្ងាត់ជំនួសឱ្យរបៀបបង្ហាញ Next.js ។
បាទ/ចាស។ Standard ចាប់ផ្តើមជាមួយនឹងការត្រួតពិនិត្យដូចគ្នា ហើយចំណាយពេលដែលនៅសល់ដើម្បីជួសជុលអ្វីដែលវាបានរកឃើញ។ Starter មានសម្រាប់ក្រុមដែលនឹងធ្វើការងារដោយខ្លួនឯង ហើយគ្រាន់តែត្រូវការដឹងពីកន្លែងដែលត្រូវជីក។
ការត្រួតពិនិត្យឃើញថា៖ ពេលវេលាឆ្លើយតបរបស់ម៉ាស៊ីនមេបង្ហាញដាច់ដោយឡែកពីការបង្ហាញ និងថ្លៃដើមស្គ្រីប។ ការវិភាគ API ឬសំណួរគឺជាកម្មវិធីបន្ថែម នៅក្នុង Node, Express, NestJS ឬ Rust ។
ការចូលប្រើសម្រាប់អានទៅកាន់ឃ្លាំង ឬបណ្ណសារនៃប្រភព បូកនឹង URL នៃទំព័រ។ នៅលើ Standard និង Advanced ខ្ញុំជំរុញការជួសជុលទៅសាខាមួយ ដូច្នេះខ្ញុំត្រូវការការអនុញ្ញាតដើម្បីបង្កើតវា។ ប្រសិនបើអ្នកមិនចង់ផ្តល់វាទេ ខ្ញុំនឹងផ្ញើបំណះជំនួសវិញ។ ខ្ញុំមិនដែលត្រូវការការចូលប្រើសម្រាប់ដាក់ពង្រាយទេ។
នៅលើទំព័រផលិតកម្មផ្ទាល់របស់អ្នកតាមលំនាំដើម ដូច្នេះលេខត្រូវគ្នានឹងអ្វីដែលអ្នកប្រើប្រាស់របស់អ្នកទទួលបាន។ ប្រសិនបើទំព័រនៅពីក្រោយការចូល ឬមិនទាន់បានដាក់ពង្រាយនៅឡើយ តំណភ្ជាប់ staging គណនីសាកល្បង ឬជំហានដើម្បីដំណើរការវាដោយផ្ទាល់ទាំងអស់ដំណើរការ ហើយរបាយការណ៍បញ្ជាក់ថាលេខមកពីណា។
ការវាយតម្លៃរបស់អតិថិជន
មើលអ្វីដែលអតិថិជនរបស់យើងនិយាយអំពី Zinn នេះ
ប្រភេទ
គោលការណ៍ Zinner
Zinns ដែលពាក់ព័ន្ធ
បង្កើតកម្មវិធីគេហទំព័រប្រកបដោយវិជ្ជាជីវៈដោយប្រើ Next.js, React, Firebase & Node.js
បង្កើតកម្មវិធីគេហទំព័រផ្ទាល់ខ្លួនដោយប្រើ React JS, Node JS & Google Firebase
