ASSETS sagrupēšana, jeb sakārtošana
Iepriekš jūs uzzinājāt, kādi assets līdzekļi ir programmā React, un paraugpraksi to glabāšanai projektu mapēs.
Šajā rakstā jūs uzzināsiet par līdzekļu iegulšanas priekšrocībām un trūkumiem, tostarp par klienta/servera puses līdzekļu piemēriem. Jūs arī uzzināsiet par kompromisiem, kas raksturīgi lielu līdzekļu izmantošanai.
Lietojumprogrammas faili, visticamāk, tiks apvienoti, strādājot ar React lietotni. Sagrupēšana ir process, kurā visi lietotnē importētie faili tiek apvienoti vienā failā, ko dēvē par komplektu. Šo apvienošanu var veikt vairāki rīki. Tā kā šobrīd apspriežam tieši “npx create-React-app”, lai izveidotu dažādas React lietotnes, jūs koncentrēsities uz tīmekļa pakotni. Tas ir tāpēc, ka tīmekļa pakotne ir iebūvēts rīks react lietotnes izveidei.
Kas ir tīmekļa pakotne un kāpēc tas jums ir nepieciešams.
Vienkārši sakot, tīmekļa pakotne ir moduļu komplektētājs.
Praktiski tas nozīmē, ka būs nepieciešami dažāda veida faili, piemēram, SVG un attēlu faili, CSS un SCSS faili, JavaScript faili un TypeScript faili, un tas apvienos tos kopā, lai pārlūkprogramma varētu saprast šo paketi un strādāt ar to. .
Kāpēc tas ir svarīgi?
Veidojot vietnes, jūs, iespējams, varētu iztikt bez tīmekļa pakotnes, jo jūsu projekta struktūra var būt vienkārša: jums var būt viena CSS bibliotēka, piemēram, Bootstrap, kas tiek ielādēta no CDN (satura piegādes tīkla). Statiskajā HTML dokumentā var būt arī viens JavaScript fails. Ja tas ir viss, šādā gadījumā jums nav jāizmanto tīmekļa pakotne.
Tomēr mūsdienu tīmekļa izstrāde var kļūt sarežģīta.
Šeit ir piemērs dažām pirmajām koda rindiņām vienā React lietojumprogrammas failā:
import React from 'react';
import '@atlaskit/css-reset';
import styled from 'styled-components';
import './index.css';
import { ThemeProvider } from './contexts/theme';
import { DragDropContext } from 'react-beautiful-dnd';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Nav from './components/Nav';
import data from './data';
import Loading from './components/Loading';Imports šeit ir no izdomātām bibliotēkām un resursiem, jo konkrētās bibliotēkas nav nepieciešamas. Visiem šiem dažādajiem importētajiem failiem var būt dažādi failu tipi: .js, .svg, .css un tā tālāk.
Savukārt visiem importētajiem failiem var būt savi importētie faili, un pat tiem var būt importētie faili.
Tas nozīmē, ka atkarībā no citiem failiem visi šie faili var izveidot atkarības grafiku. Visu šo failu ielādes secība ir būtiska. Šis atkarību grafiks var kļūt tik sarežģīts, ka cilvēkam kļūst gandrīz neiespējami strukturēt sarežģītu projektu un pareizi apvienot visas šīs atkarības.
Šī iemesla dēļ jums ir nepieciešami tādi rīki kā tīmekļa pakotne.
Tātad tīmekļa pakotne izveido atkarības grafiku un apvieno moduļus vienā vai vairākos failos, ko pārlūkprogramma var patērēt.
React atkarības grafiki…
Atkarības grafiks ir datu struktūra, kas veidojas ar vērstā grafa palīdzību un apraksta kādas sistēmas vienības atkarību no citām tās pašas sistēmas vienībām 1.
Vērstā grafa pamatstruktūrā katrs mezgls norāda uz mezglu, no kura tas ir atkarīgs 1.
To darot, tas veic arī šādas darbības:
- Tas pārvērš moderno JS kodu, ko var saprast tikai mūsdienu pārlūkprogrammas, par vecākām JavaScript versijām, lai vecākas pārlūkprogrammas varētu saprast jūsu kodu. Šis process ir pazīstams kā transpilācija. Piemēram, varat pārsūtīt ES7 kodu uz ES5 kodu, izmantojot tīmekļa pakotni.
- Tas optimizē jūsu kodu, lai tas tiktu ielādēts pēc iespējas ātrāk, kad lietotājs apmeklē jūsu tīmekļa lapas.
- Tas var apstrādāt jūsu SCSS kodu parastajā CSS, ko pārlūkprogrammas var saprast.
- Tas var izveidot komplekta veidošanas bloku avota kartes
- Tas var radīt dažāda veida failus, pamatojoties uz noteikumiem un veidnēm. Tas cita starpā ietver HTML failus.
- Vēl viena nozīmīga tīmekļa pakotnes īpašība ir tā, ka tā palīdz izstrādātājiem izveidot modernas tīmekļa lietotnes.
Izstrādes un ražošanas režīmi…
Tas palīdz jums to sasniegt, izmantojot divus režīmus: ražošanas režīmu (production) vai izstrādes (development) režīmu.
Izstrādes režīmā tīmekļa pakotne sagrupē jūsu failus un optimizē to komplektus atjauninājumiem — lai visi vietēji izstrādātās lietotnes faila atjauninājumi tiktu ātri apvienoti. Tas arī veido avota kartes, lai jūs varētu pārbaudīt komplektētajā kodā iekļauto sākotnējo failu.
Ražošanas režīmā tīmekļa pakotne sagrupē jūsu failus, lai tie būtu optimizēti ātrumam. Tas nozīmē, ka faili tiek samazināti un sakārtoti tā, lai tie aizņemtu vismazāk atmiņas. Tātad tie ir optimizēti ātrumam, jo šos komplektus var ātri lejupielādēt, kad lietotājs tiešsaistē apmeklē vietni.
Kad visi jūsu lietotnes avota faili ir apvienoti vienā paketes failā, šis atsevišķais komplekta fails tiek pasniegts apmeklētājam, kas tiešsaistē pārlūko jūsu lietotnes tiešo versiju, un viss lietotnes saturs tiek apkalpots uzreiz.
Tas lieliski darbojas mazākām lietotnēm, taču, ja jums ir plašāka lietotne, šī pieeja, visticamāk, ietekmēs jūsu vietnes ātrumu. Jo ilgāks laiks nepieciešams, līdz tiek ielādēta tīmekļa lietotne, jo lielāka iespēja, ka apmeklētājs aizies un pāries uz citu nesaistītu vietni. Ir vairāki veidi, kā risināt šo liela paketes problēmu.
Viena no šādām pieejām ir koda sadalīšana — prakse, kurā moduļu komplektētājs, piemēram, tīmekļa pakotne, sadala vienu komplekta failu vairākos komplektos, kas pēc tam tiek ielādēti pēc vajadzības. Ar koda sadalīšanas palīdzību jūs varat ar slinkās ielādes “Lazy load” palīdzību ielādēt tikai tās daļas, kurām jebkurā brīdī ir jābūt lietotnes apmeklētājam. Šī pieeja ievērojami samazina lejupielādes laiku un ļauj React darbināmām lietotnēm iegūt daudz lielāku ātrumu.
Ir arī citi veidi, kā risināt šīs problēmas…
Dzīvotspējīgas alternatīvas piemērs ir SSR (servera puses renderēšana).
Izmantojot SSR, React komponenti serverī tiek atveidoti HTML formātā, un apmeklētājs lejupielādē gatavo HTML kodu. Alternatīva SSR ir klienta puses renderēšana, kas lejupielādē failu index.html un pēc tam ļauj React ievadīt savu kodu īpašā HTML elementā (saknes elements lietotnē Create-react-app). Šajā kursā jūs strādājāt tikai ar klienta puses renderēšanu.
Dažreiz varat apvienot klienta puses renderēšanu un servera puses renderēšanu. Šīs pieejas rezultātā tiek sauktas par izomorfām lietotnēm.
Šajā rakstā jūs uzzinājāt par līdzekļu iegulšanas priekšrocībām un trūkumiem, tostarp par klienta/servera puses līdzekļu piemēriem. Jūs arī uzzinājāt par kompromisiem, kas raksturīgi lielu līdzekļu izmantošanai.
Atbildēt
Lai komentētu, jums jāpiesakās sistēmā.