typescript - webpack-dev-server durează o veșnicie să încarce pachetul

webpack-dev-server durează aproximativ un minut pentru a reîncărca aplicația web. bundle.js are aproximativ 4 MB - știu că e mare, dar fiind încărcat de pe serverul local, nu ar trebui să dureze atât de mult? De asemenea, acesta nu este timpul pentru recompilare. Este doar reîncărcarea. Așa că, chiar dacă nu se schimbă nimic și doar declanșez reîmprospătarea în browser, un minut este cât va dura să se încarce bundle-ul.

Care ar putea fi motivul pentru asta? Sau este pur și simplu modul în care funcționează de obicei? Cum se poate depana așa ceva în webpack-dev-server? Aș dori să identific blocajul.

Răspuns #1

În primul rând, pentru a răspunde efectiv întrebării - da - atât durează să se încarce un fișier de această dimensiune prin HTTP. Și nu putem face nimic în privința asta. Dacă cineva are vreo idee despre cum să accelereze efectiv procesul de încărcare (fără caching), să îmi spună în comentarii.

TL;DR

Singura soluție la aceasta de care sunt conștient în acest moment este caching. Dar trebuie să te asiguri că păstrezi în cache lucrurile potrivite.

Lucruri aleatorii care s-ar putea să se dovedească a fi o soluție

Personal am avut două omisiuni în configurația mea. Banale, dar absolut esențiale de verificat/remediat.

Notă: Următorul are sens doar dacă faci divizarea codului - bibliotecile terțe care nu se schimbă ar trebui încărcate separat de fișierele la care lucrezi (mai multe detalii mai jos).

1. Am avut cache-ul dezactivat pentru deschiderea devtools. Nu-mi amintesc de ce am activat acea funcție de la început și am uitat complet că am făcut-o. Se dovedește a fi o idee foarte proastă. Asigură-te că nu ai activată această opțiune (asigură-te că acea căsuță este nebifată!).

   

2. O altă problemă mare este că VSCode pe care îl folosesc și, mai precis, pluginul Chrome Debugger pentru VSCode, dezactivează cache-ul implicit. Așa că aplicația web în modul de depanare a început să se încarce lent de nicăieri. Vestea bună este că există o opțiune pentru a-l activa din nou: disableNetworkCache (true implicit)

Chiar dacă faci cache, dacă pachetul tău este mare, în cele din urmă cache-ul se va invalida și va trebui să aștepți în timp ce se încarcă versiunea proaspătă, cu excepția cazului în care folosești împărțirea codului pentru a împărți acel pachet în mai multe piese independente, care se vor invalida la diferite momente și chiar dacă se vor invalida, se vor încărca mult mai repede decât un singur pachet mare.

Sfaturi din experiență personală

În primul rând, dacă dintr-un motiv oarecare ești blocat pe vechiul CRA, trebuie să faci upgrade; practic, fiecare lună în care nu o faci complică procedura de upgrade care este oricum iminentă, decât dacă nu intenționezi să mai lucrezi vreodată la acel proiect.

Dacă proiectul tău a ajuns deja într-o etapă în care upgrade-ul pur și simplu nu este fezabil, deoarece modulele și pluginurile actualizate vin cu cerințe noi care s-ar putea să nu fie compatibile cu fișierele din proiectul tău, va trebui să faci eject. Poate suna ciudat, dar s-ar putea să fie mai puțin dureros decât să încerci să faci acest lucru fără el.