# Hybrid App Partial Update Note

## Angular 編譯檔案架構
### 主要架構 (with params `--named-chunks`):

- lazy loading 的 module 會被包成獨立的檔案，（如上圖的 `finance-manage-finance-manage-module-ngfactory.23fafcb915feb2af1e97.js`）。
- 檔名後綴的 hash 會因檔案內容異動而變更。
- 當我們僅修改其中一個 lazy-loading 的 module 時，其他未修改的 檔案不會被異動（除了下面提到的幾個檔案外）。
- 當其中一個檔案內容異動時，會連帶影響下面幾個檔案：
- 因為檔名後綴的 hash 變更，引用該檔案的其他檔案也會異動，如 main.js、runtime.js、index.html。
- 如果內容變動包含引用的第三方套件，有可能因為 tree-shake 讓原本有引用的套件被刪除或新增，因此 vendor.js 會被異動。
- 如果內容變動包含 polyfill 的引用，有可能引響 polyfill.js

**main.js、runtime.js、index.html 這三個檔案應該是在每次有檔案異動，都會被連帶影響的檔案。**

### assets
angular 不會為在 assets 資料夾內的檔案加上後綴 hash（包括放在 asssets 內的 js 檔案）。

---

## Angular 建置的相關設定
為了符合熱更新需要，在開發建置 angular app 時，可以依情況修改下列配置。

### vendorChunk
未開啟 `vendorChunk` 時，所有的第三方套件都包在 `main.js`
( main.js 約 2.36mB)

開啟 `vendorChunk` 後，第三方套件包在 `vendor.js`，而這些是相對被修改的機率較低的模組
(main.js 約 572kB)

### namedChunks
未開啟 `namedChunks` 時，lazy-loading 的 bundle 會以 chunk id 命名:

開啟 `namedChunks` 後，chunk 會以 modula name 命名：

### 抽換檔案的安全性方案 （Subresource Integrity 機制）
開啟 `subresourceIntegrity` 參數後，angular 會在 index.html 引用外部資源之前，做檔案完整性的驗證。
> 僅限 `<link>` 及 `<script>` 引用的檔案

<link 
  rel="stylesheet" 
  href="styles.ebbe56918daaae479df8.css" 
  crossorigin="anonymous" 
  integrity="sha384-syjKH9QMpt/OVIpyzuxEuFPX3APZLUtToBCMDBEQXdliFB0lwjauutUFv6OxAf+P"
  >
<script 
  src="main.29531051127950c0d546.js" 
  crossorigin="anonymous" defer 
  integrity="sha384-hrXLiys5c5THFrUDK22AfyibUQI7y4xwh9cv2lJQLan8XhrDy1K9s/ojMxRX3W/A"
  ></script>

瀏覽器在引用相關資源之前，會先用 integrity 的 hash 值驗證檔案內容的完整性，若驗證不過就不會執行：

瀏覽器支援度：

Subresource Integrity [MDN]: https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity

### cache 相關
避免 index.html 被快取的做法：

<meta http-equiv="Cache-Control" content="no-cache, no-store, max-age=0, must-revalidate">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />

**Reference**
https://poychang.github.io/disable-browser-cache-on-angular-site/