Produkční prostředí řady Angular 11 (XIV) pro ladění

Malý hajzl · Zveřejněno 11.08.2020 17:59:35

Angular 9 Series (1) Dynamicky zatížené komponenty
https://www.itsvse.com/thread-9238-1-1.html

Dynamické přenosové parametry komponent řady 9 série (2)
https://www.itsvse.com/thread-9245-1-1.html

Série Angular 9 (3) podporuje dynamické události komponent
https://www.itsvse.com/thread-9246-1-1.html

Vlastní potrubí pro Angular 9 Series (IV)
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formátuje formát měny částky
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 series (VI) volá nativní JS proměnné a metody
https://www.itsvse.com/thread-9254-1-1.html

Angular 9 série (VII) zaměřovač ve stylu CSS
https://www.itsvse.com/thread-9264-1-1.html

Řada Angular 9 (VIII) aktualizuje hodnotu podkomponenty spuštěním události pomocí setu
https://www.itsvse.com/thread-9267-1-1.html

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

Angular 9 série (10) vkládá panely pro ladění vývojářů vconsole a eruda
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 Series (XI) 5 způsobů, jak definovat styly
https://www.itsvse.com/thread-9305-1-1.html

Řada Angular 9 (XII) generuje dynamické tokeny založené na OTP
https://www.itsvse.com/thread-9325-1-1.html

Série Angular 10 (třináct) představuje Baidu echarts mapy
https://www.itsvse.com/thread-9347-1-1.html

Projekt Angular zabalujeme do produkčního prostředí pomocí příkazu build a očekávaný efekt se může lišit od toho, co vidíme v našem vývojovém prostředí.

TS kód:

Přihlášení je viditelné.

AppComponent je aktuální komponenta.

Vizualizace vývojového a produkčního prostředí jsou následující:

Produkční prostředí vůbec nebylo takové, jaké jsme očekávali.

O datech příkazů build:

Optimalizace výkonu Angular buildu
https://www.itsvse.com/thread-9203-1-1.html

V tuto chvíli ho musíme ladit.
SourceMap je informační soubor, který uchovává mapování polohy zdrojového kódu a zkompilovaného kódu

V front-end práci se používá hlavně k řešení ladicích problémů v následujících třech aspektech:

a. Po zmatení je komprese kódu zmatená
b. Po kompilaci do css nebo JS pomocí jiných jazyků, jako jsou sass a typeScript
c. Po vícesouborovém sloučení pomocí balicích nástrojů, jako je webpack

V těchto třech případech nemůžeme ladit zdrojový kód tak snadno jako při ladění, takže potřebujeme, aby nám SourceMap pomohl převést ho do zdrojového kódu v konzoli pro ladění.

Musíme upravit příkaz build, který zní takto:

Přihlášení je viditelné.

(Před přidáním parametrů)

(Po přidání parametrů)

Vidíte, že se generuje spousta *.map souborů.

Jak je vidět na obrázku výše, použijte Google Chrome, stiskněte F12 pro vstup do vývojářského režimu, vyberte zdrojový kód, vyberte main.js a poté klikněte pravým tlačítkem a vyberte možnost "Přidat zdrojovou mapu" pro přidání adresy generovaného mapového souboru.

Například:

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

(Konec)

[Angular] Produkční prostředí řady Angular 11 (XIV) pro ladění

Související příspěvky

Prohlížené sekce