Angular CLI 1.2.4命令ng build的說明

Question

我正在學習Angular4，想知道ng build和ng build --prod真正為我們做什么。

使用ng build運行時，例如dist文件夾中生成了main.bundle.js，main.bundle.js.map

但是使用ng build --prod時，例如只有main.90e798078cb11a3159ce.bundle.js在dist文件夾中生成

任何人都可以解釋ng build如何使用--prod和不使用--prod

謝謝

Answer 1

根據angular-cli文檔：

--dev/--target=development和--prod/--target=production都是“ meta”標志，用於設置其他標志。 如果您不指定任何一個，則將獲得--dev默認值。

並在此鏈接中說明了它們之間的區別： https : //github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds

  Flag                 --dev    --prod
--aot                   false     true
--environment            dev      prod
--output-hashing        media      all
--sourcemaps             true     false
--extract-css           false     true

Answer 2

ng build –prod OR ng build

使用--prod標志可以使Angular提前進行時間編譯（AOT）。

提前進行AOT編譯

在瀏覽器下載並運行該代碼之前，Angular Ahead-of-Time（AOT）編譯器會在構建階段將Angular HTML和TypeScript代碼轉換為高效的JavaScript代碼。

AOT的優勢：

1. 在瀏覽器上運行之前突出顯示編譯錯誤，運行時錯誤和異常，因此命名為Ahead Of Time（AOT）。

2. 如果您在項目中使用ng build來構建應用程序，則如果注意到build目錄中vendor.bundle.js和vendor.bundle.js.map文件的文件大小，它將以MBS格式下載到瀏覽器，使我們的應用程序加載過多。

但是另一方面，如果您使用ng build –prod標志，則會注意到此文件過多減少到200 KBS，意味着大小減小了100倍或更多倍。

---

因此，我建議您通過使用--prod標志在Angular Application的構建中使用AOT。

並且，如果您想進一步閱讀和了解有關此主題的信息，請訪問以下站點： https : //angular.io/guide/aot-compiler