Бет жылдамдығына арналған React және Vue Frameworks сабақтары

Бет жылдамдығына үздіксіз ұмтылу барысында біз жиі сол нүктеге ораламыз. Өнім, маркетинг және өсу командаларының технологиялық топтарды ынталандыру күш-жігеріне қарамастан, сайт өнімділігін жақсартуға болатын тапсырмалар рефакторинг қажеттілігіне байланысты жиі кейінге қалдырылады, тіпті олар орындалса да, олар әрқашан толық нәтиже бермейді. Бұл циклде нақты өнімділікке қол жеткізудің кейбір терең перспективаларын қарастыру пайдалы. Мысалы, React.js және Vue.js жылдамдығынан немесе олардың Next.js және Nuxt.js сияқты SSR (сервер жағындағы көрсету) кеңейтімдері басқа платформалармен салыстырғанда қандай сабақ ала аламыз? jQuery және CSS файлдарының МБ-ларын оңтайландыру уақыты келген жоқ па? Веб-өнімділігін нашар ақпараттандырылған алдыңғы қатарлы әзірлеушілерге құрбан ететін ірі компаниялар қашан оянады? Осы сұрақтарды бір-бірлеп қарастырайық.

Next.js және Nuxt.js негізіндегі сайттар неге жылдам?

React және Vue негізінде жасалған SEO-ға ыңғайлы құрылымдар болып табылатын Next және Nuxt платформалары жылдамдық өнімділігімен ерекшеленеді. Бірақ неге бұл платформалар соншалықты жылдам?

React.js және Vue.js төменде көрсетілгендей әрбір бетті қосалқы құрамдастарға бөлетін құрамдасқа негізделген құрылымдар.

сурет (2).png — Ақпарат көзі: https://dev.to/yakimych/seriously-do-react-hooks-replace-state-containers-3cpl

Осы тармақты көрсету үшін нақты мысалды алайық: электрондық коммерция листингінің беті. Бұл листинг бетін келесі қосалқы компоненттері бар деп санауға болады:

Header
Листинг
- Тізімге кіру ақпараты
  - Бет атауы
  - Шағын
  - Өнім саны
- фильтр
  - Санат сүзгісі
  - Баға сүзгісі
  - ...
- Сұрыптау
- Өнім карталары
  - Өнімнің фотосуреті
- Өнім туралы мәліметтер
  - Өнім атауы
  - Өнімнің бағасы
    - Үзіліссіз баға
    - Сату бағасы
  - Жеңілдік ставкасы
  - Науқан туралы ақпарат
- бөле
- Санат мазмұны
Төменгі деректеме

Nuxt.js көмегімен құрамдасқа негізделген қолданбаны жасаған кезде, осы құрамдастардың әрқайсысы бөлек кодталады және басты бетке қосылады. Мысалы, ProductPhoto.js деп аталатын файлды қарастырыңыз. Өнім фотосуреттері үшін қандай функциялар қажет болса да (карусель, жауап беретін кескінді көрсету және т.б.), JS коды осы құрамдас ішінде жазылған. Сол сияқты, оған тек осы компонент пайдаланатын CSS файлдары кіреді. Бұл компонент пайдаланылса, әрбір құрамдасқа қажетті файлдар ғана орындалатынын білдіреді.

Қазіргі уақытта көптеген веб-платформаларда бұл процесс қалай өңделеді?

script.js файлы мүшелік, сүзгілер және арба беттерінен бастап барлық беттерде жұмыс істейтін мәзірге дейінгі барлық кодты қамтиды. Нәтиже?

a. бар веб-сайттар 3 МБ JS файлы және 1.5 МБ CSS файл. Негізгі мәселе тек файл өлшемдері ғана емес, сонымен қатар Android мобильді құрылғысының орташа процессоры миллисекундтарда мыңдаған код жолын орындайды деп күте алмайсыз. Қажетті кодты ғана іске қосу арқылы өнімділікке қол жеткізуге болады.

Рендерді блоктайтын ресурстарды қалай жоюға болады?

Бүгінгі таңда ең жақсы 32 миллион веб-сайттың 1%-ы Font Awesome қаріптер кітапханасын пайдаланады, оның көлемі орта есеппен 250 Кбайт. Сілтеме эффектісіне байланысты асинхронды жүктеу артықшылық бермейтінін ескере отырып, ұялы телефонда немесе жұмыс үстелінде ашылған беттің бірінші экранында қанша қаріптің көрінетінін ойлаңыз. 50 түрлі платформада жүргізілген қысқа зерттеу орташа есеппен 3.4 белгішенің пайдаланылғанын анықтады (көбінесе: арба, пайдаланушы, мәзір, хабарландыру). Осылайша, проблемаларсыз тек төрт белгішені жүктеу үшін біз бүкіл кітапхананы жүктейміз.

сурет-2 (1).png — Ақпарат көзі: https://trends.builtwith.com/widgets/Font-Awesome

Жетілдірілген JS фреймворктері мұны қалай басқарады? Тиісті құрамдас бөлікте пайдаланылатын белгішелердің тек SVG пішімін импорттау арқылы бүкіл қаріпті немесе CSS кітапханаларын жүктеу қажеттілігін болдырмайды.

Bootstrap және React JS пайдалану бізге не айтады?

Bootstrap JS кітапханасының бүкіл әлем бойынша барлық сайттардағы нарықтық үлесі 26%, ал React қолдануы шамамен 4% құрайды. Bootstrap икемділігімен және пайдаланудың қарапайымдылығымен танымал, бұл жылдам дамуға мүмкіндік береді. Дегенмен, бұл икемділік құны бар: жалпы JS функциялары, кең кодты қамту және сіз ешқашан пайдаланбайтын мүмкіндіктерге арналған функциялар жобаңызға кіреді.

сурет-3 (1).png — Ақпарат көзі: https://w3techs.com/technologies/comparison/js-bootstrap,js-react

Сонымен, сұрап көрейік: пайдаланудың 100%-дан астам артуы нені білдіреді 10,000 1,000-нан XNUMX-ға дейінгі сайттар көрсетеді? Бұл ең жақсылардың егжей-тегжейлерді одан да жақсырақ болу үшін өз пайдасына айналдыратынын көрсетеді.