Angular 應用主要由組件及其 HTML 模板組成。由於瀏覽器無法直接理解 Angular 所提供的組件和模板,因此 Angular 應用程序需要先進行編譯才能在瀏覽器中運行。Angular 提供了
兩種方式來編譯angular應用程序:
-
即時編譯 (JIT,Just in time),它會在運行期間在瀏覽器中編譯你的應用。
-
預先編譯(AOT,Ahead of time),它會在構建時編譯你的應用。
注:當你運行 ng build
(僅編譯)或 ng serve
(編譯並啟動本地服務器) 這兩個 CLI 命令時 JIT 編譯是默認選項;要進行 AOT 編譯,只要讓 ng build
或 ng serve
命令中包含 --aot
標志。
帶有 --prod
標志的 ng build
命令 (ng build --prod
) 會默認使用 AOT 編譯。
一:AOT:在瀏覽器下載和運行代碼之前的編譯階段,Angular 預先(AOT)編譯器會先把你的 Angular HTML 和 TypeScript 代碼轉換成高效的 JavaScript 代碼。好處如下:
- 渲染得更快:使用 AOT瀏覽器下載預編譯版本的應用程序。 瀏覽器直接加載運行代碼,所以它可以立即渲染該應用,而不用等應用完成首次編譯;
- 需要的異步請求更少:編譯器把外部 HTML 模板和 CSS 樣式表內聯到了該應用的 JavaScript 中。 消除了用來下載那些源文件的 Ajax 請求;
- 需要下載的 Angular 框架體積更小:如果應用已經編譯過了,自然不需要再下載 Angular 編譯器了。 該編譯器差不多占了 Angular 自身體積的一半兒,所以,省略它可以顯著減小應用的體積;
- 提早檢測模板錯誤:AOT 編譯器在構建過程中檢測和報告模板綁定錯誤,避免用戶遇到這些錯誤;
- 更安全:AOT 方式會在發給客戶端之前就把 HTML 模板和組件編譯成 JavaScript 文件。 不需要讀取模板,也沒有客戶端組裝 HTML 或執行 JavaScript 的危險操作,受到注入類攻擊的機會也比較少。