Angular AoT編譯

Question

我正在瀏覽更新的Angular文檔，並發現他們現在已經改變了他們的方法。 早些時候，情況如下：

1. 運行ng eject命令生成webpack.config.js。
2. 爲aot創建webpack.config.aot.js，main-aot.ts，tsconfig-aot.json，index-aot.html的單獨代碼。

現在，他們正在使用rollup和system.js。

這背後有什麼特別的原因嗎？ 和服務器端渲染以及它提到使用webpack。 爲什麼不爲兩者使用webpack？ 還提到angular-cli在引擎蓋下使用webpack，那麼爲什麼需要使用system.js？

Answer 1

的WebPack VS彙總

的WebPack產生了比彙總稍大束。

這種差異可以通過Webpack添加到每個捆綁模塊的額外開銷來解釋。

的WebPack包裝在一個新的功能範圍 每一個模塊，而彙總把一切都在一個單一的功能範圍

另一個區別是，彙總支持樹搖晃。

樹搖動是確保未使用的代碼不包含在該包中的過程。在這種情況下，這意味着從Angular框架中省略任何未使用的代碼。

不過，在我們判斷Webpack之前，需要指出的是Webpack比Rollup功能更豐富。

Webpack彌補了具有更大靈活性的稍大的包裝尺寸。其中一個例子是代碼拆分，可用於延遲加載。

彙總不支持代碼拆分，因此您僅限於單個文件包。這可能會成爲一個問題，因爲您的應用程序的增長超出了單一文件下載的實際範圍。 Webpack將允許您將包分成多個文件並按需延遲加載。

AOT VS JIT

隨着AOT，編譯器在使用一組文庫的構建時間運行一次;有JIT它運行用於使用一組不同的庫

的當使用角-CLI在發展--aot標誌被設置爲false默認在運行時每個用戶每一次，而在生產true。

AOT編譯和樹木抖動比開發實際需要更多的時間。因此，它在發展最好JIT編譯和部署到生產環境之前切換到AOT編譯。

使用SystemJS

的JIT版本依賴SystemJS的加載單獨的模塊。它的腳本出現在它的index.html中。

AOT版本將整個應用程序加載到單個腳本aot/dist/build.js中。它不需要SystemJS，因此腳本不存在於其index.html

爲什麼不使用webpack呢？

回答：因爲我們想要支持樹木搖動，利用ES2015模塊的巧妙設計，並且生產中有更小的捆綁。在開發過程中，我們不太擔心捆綁包的大小，在服務器端渲染代碼分割是一個非常棘手的問題，Rollup不支持它。同樣，Rollup不會執行熱模塊替換（HMR），有些東西只是不會轉換成ES2015，而webpack會以沉着的方式處理您投入的所有內容。

注意：不僅Angular，而且Ember，React和Vue也使用Rollup進行生產建設。

參考文獻：Angular Docs，

Webpack vs Rollup