Pitfalls
reflect-metadata shim is required when using class decorators
Solution from Stackoverflow:
These two are needed to be imported on the typescript file, they are required since we are using the ng directives.
I think you are missing only the following, which needs to be at the beginning of your top level typescript or JavaScript file. Specifically, these need to be prior to the first line is that loads Angular.
import 'zone.js';
import 'reflect-metadata';
把上述代碼加到 main-aot.ts, 雖然解決了angular X loading的問題，但會(huì)出現(xiàn)如下錯(cuò)誤：
Uncaught ReferenceError: require is not defined
build.js:1
build.js:1
這是因?yàn)閞ollup沒法處理這種import, 改用<script>引入zone和reflect到index.html中
Angular的編譯器能夠在運(yùn)行時(shí)調(diào)用(例如，用戶在瀏覽的時(shí)候) 或構(gòu)建時(shí)調(diào)用(作為構(gòu)建過程的一部分)。 這是因?yàn)锳ngular的可移植性 - 我們可以在任何JavaScript VM的平臺(tái)上運(yùn)行Angular框架，所以這就是為什么要讓Angular編譯器能在瀏覽器和node環(huán)境中運(yùn)行
事件流和即時(shí)編譯（Just-in-time）
使用TypeScript開發(fā)Angular應(yīng)用。
使用tsc編譯應(yīng)用。
構(gòu)建。
壓縮。
部署。
一旦我們部署了應(yīng)用程序，用戶打開瀏覽器，將經(jīng)歷以下步驟 (沒有嚴(yán)格的CSP)：下載所有JavaScript資源。
Angular 啟動(dòng)。
Angular通過JIT編譯處理過程，例如對我們的應(yīng)用程序的每一個(gè)ie組件生成對應(yīng)的javascript代碼。
應(yīng)用頁面呈現(xiàn)。
事件流與預(yù)編譯
相比之下，AoT需要通過以下步驟：
- 使用Typescript開發(fā)Angular 應(yīng)用。
- 使用 ngc來編譯應(yīng)用。
- 執(zhí)行Angular的編譯器編譯模板和生成（通常是）TypeScript文件。
- 編譯TypeScript文件為JavaScript代碼。
- 捆綁。
- 壓縮。
- 部署。
雖然上述過程似乎更為復(fù)雜，用戶只需通過步驟：
- 下載所有的資源。
- Angular啟動(dòng)。
- 應(yīng)用程序被渲染。
因?yàn)锳OT采用code generation方式，生成的代碼量會(huì)比原來的文件大，應(yīng)用足夠大時(shí)，AOT的大小會(huì)反超JIT, 不過可以縮短啟動(dòng)時(shí)間
Reference: https://coyee.com/article/11723-ahead-of-time-compilation-in-angular
angular-cli ng build --prod: 1.5MB, 869ms
console errors：
404 bootstrap.css, common.css, style.css, mock-config.json, mock-catalog.json
ngc + rollup: 1.1MB, 649ms
可繼續(xù)優(yōu)化的點(diǎn)：minify? gzip, lazy loading
gzip是在web server上配置的，等到deploy的時(shí)候再作討論
lazy loading目前rollup bundler不支持，但了解到webpack支持，angular-cli里面用的就是webpack的tree-shaking。
rollup和webpack都是支持tree-shaking的bundler, 但是webpack對tree-shaking的支持沒有rollup好。
會(huì)持續(xù)更新后續(xù)的bundler選擇問題~~~
滾來更新后續(xù)了?。?！
沒想到最后用的竟然是angular-cli自帶的ng build -prod，原因是：這樣打出來的包和手工aot打出來的包差別不大，不管是從文件大小還是運(yùn)行速度。。。
