Angular CLI 正式環境的編譯

正常在開發中,我們常用:

$ ng build –watch

這時候對應的 _Layout.cshtml 為:

<script src=”~/ClientApp/dist/inline.bundle.js”></script>
<script src=”~/ClientApp/dist/polyfills.bundle.js”></script>
<script src=”~/ClientApp/dist/styles.bundle.js”></script>
<script src=”~/ClientApp/dist/vendor.bundle.js”></script>
<script src=”~/ClientApp/dist/main.bundle.js”></script>
</environment>

主要目的在於提供 Chrome 環境可以 debug,並且可以隨時監測程式碼是否有修改,隨時進行編譯。

但衍生的問題是速度會比較慢,尤其在正式環境是不能接受這樣的速度。可以透過 –prod 參數進行正式環境的編譯,會增加以下幾項工作:

The –prod meta-flag engages the following optimization features.

  • Ahead-of-Time (AOT) Compilation: pre-compiles Angular component templates.
  • Production mode: deploys the production environment which enables production mode.
  • Bundling: concatenates your many application and library files into a few bundles.
  • Minification: removes excess whitespace, comments, and optional tokens.
  • Uglification: rewrites code to use short, cryptic variable and function names.
  • Dead code elimination: removes unreferenced modules and much unused code.

更好的方式可以再進一步縮小檔案大小:

$ ng build –prod –build-optimizer

請注意,編譯出來的內容:

<environment include=”Production”>
<script src=”~/clientapp/dist/inline.318b50c57b4eba3d437b.bundle.js”></script>
<script src=”~/clientapp/dist/polyfills.b488325233b482097d13.bundle.js”></script>
<script src=”~/clientapp/dist/main.21c3b35bee403f2837dc.bundle.js”></script>
</environment>

這裡可以使用 asp.net core environment 區隔 Production & Development,同時 Production 的檔案名稱會加入 UUID,因此會隨時異動,如此就可以避免 client cache 所造成問題。