AOT? Prerender? Universal? 你搞得我好混亂

General
1

AOT/JIT

AOT: Ahead-of-Time compliation.
JIT: Just-In-Iime compilation.
所以專案經過 AOT 後，vendor 檔案會變小的原因是，瀏覽器已經不需要 compiler 了，build 工具就會把 compile 相關的程式碼抽掉，也表示 polyfill.js 裡面的 reflect 相關的 js 檔案也不需要一併傳給前端。這就是為什麼 AOT 應為預設的建置模式。產出的檔案大小會比JIT小很多。

可是AOT有寫法上的限制，請參閱這篇文章，在開發時，就要特別留意。

Universal

Universal 是讓 Angular 的程式碼先在伺服器端作 bootstrap 的行為，這時就會有 HTML Template 的產生，再把產生出來的 DOM 塞回頁面裡後再傳給前端瀏覽器。前端瀏覽器收到頁面後，會再重新執行一次 client 端的 bootstrap，在這著時間點，由於不需要重新產生頁面，所以速度就會很快，而且在看頁面source時，也可以看到實際產生後的HTML，而不是單一HTML Tag而已了。

須留意的是，Server端的bootstrap，有些物件是無法使用的，例如 window, document 這一類的物件。

參考閱讀

AHEAD-OF-TIME COMPILATION
Multiple solutions for Angular Ahead of Time (AOT) Compilation
angular/universal

9個讚
2

遇到滿多人會有的狀況就是 ng build --prod 的時候才會有的錯誤，這些錯誤通常都是跟 AOT 的寫法不符所產生的，所以平常開發都好好的，但是碰到 –prod 的時候卻死掉了，這時候就要檢查一下是不是哪段程式沒有符合 AOT 的寫法囉!

3
4

Alex和Minko建議先使用熟悉的工具，再考慮如何最佳化，公司專案我只用angular cli

2個讚
5

請問一下

「但是碰到 --prod 的時候卻死掉了」

是指 build 的時候發生錯誤，還是執行時發生錯誤

6

如果程式裡有不符合AOT的寫法時，當在執行 ng build --prod時，會報錯。
預設 build production mode 是有啟動 AOT 模式的。

2個讚
7

AOT Strategies => https://blog.craftlab.hu/multiple-solutions-for-angular-ahead-of-time-aot-compilation-c474d9a0d508

1個讚
8

我有在思考 Universal JavaScript (UWA) 和 Service Worker (PWA) 的整合問題 (含路由)

像是啟用 Service Worker 的 Fallback

9

我覺得應該是可行的。畢竟 service worker 可以視為前端的伺服器。只是在如何簡單的實作，就要再研究了

10

請問
有辦法做到部分模組是 angular universal 跑的，需要 dom 的部分是 瀏覽器 aot 跑的嗎
找到的範例都看起來是整個 app 用 universal 跑