正常在開發中,我們常用:
$ 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 所造成問題。