Kuidas kasutada veebitöötajaid rakenduse reageerimine-loo-loo abil ja mitte välja visates

Eelmisel nädalal töötasime koos töökaaslastega rakenduses, mis tingis mõne märkimisväärselt raske protsessi, mis meie arvates ei peaks põhiteema peal käima. Nii et jõudlusprobleemide tõttu otsustasime selle raske koodi veebitöötajatele panna. Kõik oli suurepärane, kuni otsustasime tootmiskeskkonda sulanduda…

Selgub, et CRA-l (loo-reageeri-rakendus) tehtud rakendustel pole veebitöötajate jaoks “emakeelset” tuge, nii et see lihtsalt ei töötanud tootmisesse sisseehitatud kujul. See viis meid proovima (väga raske) leida viis selle töö tegemiseks.

Mõne aja pärast proovin ...

Leidsime viisi selle käivitamiseks veebipaketi laaduriga nimega Worker-Loader. Seda oli raske mõista, sest ausalt öeldes polnud keegi meist varem veebipaketiga manipuleerinud, kuid pärast mõnda aega ringi lugemist saime lõpuks aru, kuidas see töötab; kõik oli lihtsalt kuulsusrikas ...

Kuni märkasime, et laaduri tekstisiseselt käitamine (see tähendab, et see töötab impordi avalduses), ei ole lubatud reageerida, seega oli selle toimimiseks ainus viis web-pack.config faili muutmine ... Ootake! milline web-pack.config fail?!, fail, mille saate ainult rakenduse väljutamise kaudu!

OK, kuid milles sellega probleeme on? Võib ju küsida. Selliselt toimides on kaks peamist probleemi: esimene on see, et kui oma rakenduse eemaldate, saate juurdepääsu rakenduse konfiguratsioonis kõigele, ja ma mõtlen kõike, nii et kui teete midagi valesti, võite rakenduse rikkuda tõsine viis, sellepärast hoiatavad nad teid rakenduse väljutamise teel, et olete ise ja midagi ei saa nad aidata juhuks, kui midagi pidurdate.

Teine probleem ilmneb siis, kui töötate gitiga. Rakenduse väljutades peate loobuma oma praegusest sisikonfiguratsioonist ja pärast väljutamist uuesti uuesti üles ehitama. Asi, mida me kindlasti ei tahtnud teha.

React App on juhtunud appi!

Lõpuks leidsime selle tõeliselt laheda raamatukogu nimega React App Rewired, mis võimaldab teil muuta oma Webpacki konfiguratsiooni ilma rakendust väljutamata. Pärast mõningast lugemist panime selle tööle ja mitte proovida!

Lõikamine tagaajamisele ...

Vajalikud sõltuvused

Töötaja-laadur ja juhtmevaba rakendus React. Saate neid hankida, kirjutades selle oma käsureale:

npm install react-app-rewired töötaja-laadur - sääst-dev

Nüüd loome testi veebitöötaja ja rakendame selle soovitud komponendis

See on lihtne veebitöötaja fail ja see aitab meil veenduda, kas kõik sujub

Nüüd rakendage see, importides selle ja luues sel viisil uue eksemplari ...

Pange tähele, et minu veebitöötaja fail lõpeb tähega .worker.js. See on väga oluline, kuna see aitab meil vajaliku laaduri (töötaja-laadur) juurutamisel meie veebipack.config-faili koos react-app-rewired-ga

Veebipaketi seadistamine React-App-Rewired kaudu

OK, peame tegema faili web-pack.config ilma seda puudutamata. Selleks peame looma faili projekti juurtasemel (näiteks samal tasemel teie pakett.json ja kaust src) ja nimetama selle nimeks “config-overrides.js”. See fail lubab rakendusel react-app-rewired muuta faili webpack.config

Tahan, et pööraksite tähelepanu reale "test: /\.worker\.js$/", ja see regulaarne avaldis käsib laadijal võtta kõik failid, mis lõpevad .worker.js-ga, ja paneb selle töötama nagu töötaja, seetõttu ütlesin teile, et nimetage kõik oma veebitöötajad niimoodi lõppevaks.

Lõpuks peame minema faili package.json ja muutma skripte, et helistada react-app-rewired.

Ja see ongi kõik! peaks teie veebitöötaja töötama suurepäraselt nii arendus- kui ka tootmiskeskkonnas.

Selle testimiseks panin vaatesse oma osariigi loenduri atribuudi (failis App.js) ja Web Workeri abil tehtud loendur värskendatakse suurepäraselt! : D

minu vastasmuutuja Manustatud vaatesse

Loodan, et see aitab teid kõiki palju ja paneb teie veebitöötajad ... tööle