inlineCriticalCss 是 Angular 專案中的一個配置選項，用於指定是否將關鍵 CSS 內聯到頁面 HTML 中。

通常情況下，網頁中的 CSS 檔案是由瀏覽器非同步載入的，這意味著在瀏覽器載入完 HTML 後還需要額外的時間來載入 CSS 檔案，這會導致頁面的首 次渲染時間較長，使用者體驗不佳。

為了解決這個問題，可以將頁面的關鍵 CSS 內聯到 HTML 中，以減少載入時間。inlineCriticalCss 就是用於控制是否開啟這個功能的配置選項。當 inlineCriticalCss 設定為 true 時，Angular 編譯器會將關鍵 CSS 內聯到 HTML 中，以加快頁面的載入速度。

需要注意的是，將關鍵 CSS 內聯到 HTML 中會增大 HTML 檔案的體積，因此只有在 CSS 檔案較小、頁面載入時間較長的情況下，才建議開啟這個選項。

![](https://img-blog.csdnimg.cn/a8cddd450ed948188f099db67ee3a114.jpeg#pic_center)

在 Angular 開發領域，CSS inlining time 是指將應用程式的 CSS 樣式應用於元件時所需的時間。CSS inlining time 的概念與 Angular 的 View 渲染有關，當 Angular 載入元件並準備渲染時，它需要將該元件使用的所有 CSS 樣式應用於元件的 DOM 元素中。這個過程涉及將 CSS 樣式表中的樣式應用於 DOM 樹中的元素。

CSS inlining time 的長短直接影響應用程式的效能。當 CSS inlining time 較長時，會導致應用程式的初始載入時間變長，這會影響使用者體驗。為了提高應用程式的效能，開發人員通常會採取一些措施來減少 CSS inlining time，例如：

- 縮小 CSS 檔案的大小，以減少網路傳輸時間和瀏覽器解析時間。
- 將公共的 CSS 樣式抽離出來，並儘可能地重複使用這些樣式。
- 透過使用 CSS 前處理器（如 Sass）來編寫更簡潔和易於維護的樣式程式碼，以便更快地應用樣式。
- 透過使用 Angular 的內建最佳化技術（如 AOT 編譯和程式碼分割）來減少載入時間和處理時間。

總之，CSS inlining time 是 Angular 開發領域中的一個重要效能指標，開發人員需要採取措施來減少它，以提高應用程式的效能和使用者體驗。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/21d22dcaaee04165925cbca747353afb.png#pic_center)

關於 Angular 12 的 inlineCriticalCss 選項

相關文章