Produkčné prostredie série Angular 11 (XIV) na ladenie

Malý · Zverejnené 11. 8. 2020 17:59:35

Dynamicky zaťažené komponenty série Angular 9 (1)
https://www.itsvse.com/thread-9238-1-1.html

Dynamické prenosové parametre pre sériu Angular 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

Séria Angular 9 (3) podporuje dynamické komponentové udalosti
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 Series (IV) Custom Pipe potrubia
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formátuje formát sumy meny
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 series (VI) volá natívne JS premenné a metódy
https://www.itsvse.com/thread-9254-1-1.html

Angular 9 series (VII) v štýle CSS
https://www.itsvse.com/thread-9264-1-1.html

Angular 9 séria (VIII) aktualizuje hodnotu podkomponentu spustením udalosti cez set
https://www.itsvse.com/thread-9267-1-1.html

Angular 9 Series (deväť) #id selektor aplikovaný na stránku
https://www.itsvse.com/thread-9278-1-1.html

Angular 9 séria (10) vkladá panely na ladenie vývojárov vconsole a eruda
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 Series (XI) 5 spôsobov, ako definovať štýly
https://www.itsvse.com/thread-9305-1-1.html

Séria Angular 9 (XII) generuje dynamické tokeny na základe OTP
https://www.itsvse.com/thread-9325-1-1.html

Séria Angular 10 (trinásť) predstavuje Baidu echarts mapy
https://www.itsvse.com/thread-9347-1-1.html

Projekt Angular zabalíme do produkčného prostredia pomocou príkazu build a očakávaný efekt sa môže líšiť od toho, čo vidíme v našom vývojovom prostredí.

TS kód:

Prihlásenie je viditeľné.

AppComponent je aktuálna komponenta.

Vizualizácie vývojového prostredia a produkčného prostredia sú nasledovné:

Produkčné prostredie vôbec nebolo také, aké sme očakávali.

O dátach build príkazov:

Optimalizácia výkonu zostavy v Angular
https://www.itsvse.com/thread-9203-1-1.html

V tejto chvíli ho musíme odladiť.
SourceMap je informačný súbor, ktorý uchováva mapovanie polohy zdrojového kódu a skompilovaného kódu

Pri front-end práci sa hlavne používa na riešenie ladiacich problémov v týchto troch aspektoch:

a. Po zmätku je kompresia kódu zmätená
b. Po kompilácii do css alebo JS pomocou iných jazykov ako sass a typeScript
c. Po zlúčení viacerých súborov pomocou nástrojov na balenie, ako je webpack

V týchto troch prípadoch nemôžeme ladiť zdrojový kód tak jednoducho ako pri ladení, takže potrebujeme SourceMap, aby nám pomohol konvertovať ho do zdrojového kódu v konzole na ladenie.

Musíme upraviť príkaz build, ktorý znie nasledovne:

Prihlásenie je viditeľné.

(Pred pridaním parametrov)

(Po pridaní parametrov)

Vidíte, že sa generuje veľa súborov *.map.

Ako je znázornené na obrázku vyššie, použite Google Chrome, stlačte F12 na vstup do vývojárskeho režimu, vyberte zdrojový kód, vyberte main.js a potom pravým kliknutím kliknite a vyberte možnosť "Pridať zdrojovú mapu" na pridanie adresy vygenerovaného mapového súboru.

Napríklad:

http://127.0.0.1:8089/main.568ae4bdd06023f965c7.js.map

(Koniec)

[Angular] Produkčné prostredie série Angular 11 (XIV) na ladenie

Súvisiace príspevky

Zobrazené sekcie