2020-6-4 Angular 12章 製作Angular應用程式

[hsiaofung]

• 前面
  • 簡單的元件
  • 伺服器呼叫

  • 路由

• 這一章討論Angular 應用程式上線 :
  • 部署
  • 建構要上線的Angular 應用程式
  • 如何減少大小?
  • 如何改善效能?
  • SEO?

[hsiaofung]

• ng build :
  • 在dist/目錄產生編譯過的檔案
  • 不要複製這個目錄底下的檔案到HTTP伺服器。(因為沒有最佳化)
• Angular 如何建置最佳化版本:
  • ng build --prod
    • 建置 : 將應用程式打包成幾個檔案，以讓瀏覽器更快載入。
    • 縮小 : 刪除空白與縮排。
    • 醜化 : 將變數與函式名稱縮小成兩或三個字元。
    • AOT : 刪除無用路徑(在應用程式送到瀏覽器時已經變異與最佳化，所以瀏覽器可以快速的繪製與執行應用程式)
    • 關掉繪製UI時的檢查。
    • 刪除沒用到的模組。

[hsiaofung]

• 基底路徑 : 建置與部署單頁應用程式時還需考慮上線位置。

  • 若程式放在根網域 : (例如: http://www.mytestpage.com)則預設就行。

  • 若不是放在根網域(例如 : http://www.mytestpge.com/app)，則修改index.html中的 <base>標籤。

  • base 標籤負責設置應用程式的相對URL的基底路徑。包括 : CSS樣式檔案、JavaScript、函式庫、圖片等。

• 例如: 沒有<base>標籤，若腳本標籤是<script src='js/main.js'>，則瀏覽器會發出http://www.testpage.com/js/main.js

• 假若有<base href="/app">標籤，若腳本標籤是<script src='js/main.js'>，則瀏覽器會發出http://www.testpage.com/app/js/main.js

• 可以指定或覆寫base的值

  • ng build --base-href /app : 這會確保產生的index.html具有正確的base標籤。

[hsiaofung]

前面 : 如何部署到伺服器並開始運作。

---

這一節討論 : 如何確保高效能

• 快取 :
  • 如何快取index.html、JS檔案與CSS檔案、與快取應該保存多久。
  • index.html會根據雜湊值載入檔案。
  • 瀏覽器絕不能快取index.html，因為載入檔案的雜湊值會更新。快取index.html只會載入舊的檔案。(伺服器要將index.html的Cache-control設定為no-cache、no-store、must-revalidate)
  • 盡可能快取其它檔案，如: JavaScript、CSS。這些檔案可以無限期的留在快取中。

[hsiaofung]

• API/伺服器呼叫與CORS
  • 如何設置應用程式，使它可以成功地發出伺服器呼叫?
  • 代理 : 代理確保請求會對同一個伺服器(與網域)發出，然後它負責對真正的API伺服器呼叫。
  • 上線部署應用程式時，也必須作類似的設定。也就是伺服器會收到API呼叫，然後負責對真正的API伺服器呼叫。
  • 若不能這麼做，則還可以修改伺服器。可以開啟伺服器的Cross-Origin Resource Sharing(CORS)，讓不同來源(網域或子網域)的網頁以額外的標頭要求API伺服器回應: Access-Control-Allow-Origin: *
  • 也可以限制標頭只能請求特定來源而非上面這樣。這麼做，可以讓你的網頁應用程式直接對API伺服器發出請求。

[hsiaofung]

• 不同環境
  • 另一個常見的應用程式建置需求是不同環境的不同組態?
  • 例如 : 測試與上線的伺服器URL不同。
  • ng serve --env=prod : 如此執行，會載入environment.prod.ts 檔案。
  • 在應用程式中，可以匯入環境檔案，Angular會根據旗標取得正確的屬性。 import { environment } from "./environments/environment"

[hsiaofung]

• 處理深連結

  • 若想要從瀏覽器輸入路徑開起頁面，則瀏覽器會向伺服器發出請求。除非有正確的設定伺服器，否則它不會找到任何相符的URL。

  • 要解決這個問題，必須設定伺服器依優先順序回應

[hsiaofung]

• 懶載入
  • 並非所有路徑都需要載入。
  • 一種常見的提高效能並減少載入時間的技術 :
    • 在初始請求嘗試最小載入
    • 將其餘的載入推遲到有需要時。
  • 懶載入影響效能並加速應用程式的初始載入。
• 接下來，執行應用程式時，Angular只會載入部分程式，在我們瀏覽執行路徑時才載入其餘模組。

[hsiaofung]

• 將登入、註冊移到UserRoutingModule
• 將股票清單、建構、與細節路徑移到StockRoutingModule。
• 在app-routes.module 中使用loadChildren

[hsiaofung]

• 伺服器端繪製與SEO
  • 從瀏覽器載入Angular應用程式的第一個請求開始看會像這樣 :
    • 對伺服器的基底路徑(例如 : www.mytestpage.com)發出一個請求。
    • 伺服器回應index.html
    • 瀏覽器開始載入index.html，然後發出請求載入每個所需的靜態檔案(CSS，JS等)。
    • 載入所有內容後，Angular 會啟動、解析路徑、載入必要元件。
    • 然後元件會發出伺服器呼叫以取得資料，然後繪製。

[hsiaofung]

• 在伺服器端繪製應用程式 :
  • 使用Angular Universal
  • 它也可以減少延遲

[hsiaofung]

• isPlatformBrowser : 可以用於其他背景，以選擇開啟/關閉應用程式中的特定流程與功能，預先載入、快取、或其他只用於瀏覽器的流程。 +APP_BASE_HREF : 在瀏覽器中，相對URL是可以的。但在Unicersal應用程式中，特別是在伺服器端，Angular Universal 的HTTP的URL必須是絕對的才能解析。
• 使用可注入服務的APP_BASE_HREF。在瀏覽器的背景下，它是我們定義的，在伺服器中，它會有整個URL。

[hsiaofung]

• 使用ngExpressEngine轉換用戶端請求成伺服器繪製的網頁，並傳給AppServerModule
• AppServerModule : 作為伺服器端繪製應用程式與我們的網頁應用程式見的橋樑。

[hsiaofung]

總結 : Angular應用程式上線 :

• 建置與部署
• 效能考量
  • 快取
  • 預先繪製(SSR)
• 懶載入