[從 0 開始的 Angular 生活]No.11 發行與部屬 Angular 應用程式的方法

發表於 | 更新於 | 分類於

前言

現在我們 Angular 專案內的環境非常的單純，只有一個 Component ，而未來如果我們開發完成時，要如何透過 Angular CLI 發行與部屬 Angular 應用程式呢？

Angular CLI 發行與部屬

可以透過 Angular CLI 的指令辦到這件事情，叫出 VS Code 的終端機，並輸入以下指令：

1
ng build

這麼做 Angular CLI 會透過 webpack 幫我們把專案的內容通通打包並且輸出到 dist 資料夾內，而且是沒有進行 minify 的版本。

而如果是正式發布的產品版，則應該額外加入 --prod 參數，進行 minify 優化，如：

1
ng build --prod

讓我們看看有無 minify 的差距吧

首先是沒有加入 --prod 的結果
Image

vendor.js 居然約有 3.3 MB ，真是驚人！

接著是有加入 --prod 的結果

Image

從快 3.3 MB 的大小被壓縮到不到 200 KB ，而且剛才看到的 vendor.js 不見了，因為它跟 main.js 合併在一起了。

小結

這次的實驗告訴我們，一定一定要記得部屬時幫這些 .js 檔好好的進行 minify 瘦身一番！

看看這個差距，的確是蠻誇張的…

0%