Aurelia的require元素包含外部資源內聯？

Question

通過開始教程時，有一個點，如果是「需要」引導庫（CSS）：

<require from="bootstrap/css/bootstrap.css"></require> 
<require from="font-awesome/css/font-awesome.css"></require> 

當我看着Chrome的檢查，我不覺得這些CSS文件作爲來源。相反，它似乎是在頁面中全部內聯的。

這是真的，或者只是與調試器的東西嗎？如果是這樣 - 這會不會影響瀏覽器中的緩存（CSS需要重新下載）？

Answer 1

當CSS資源通過<require>標籤進口的，ES6模塊加載器（由SystemJS polyfilled）用於下載的CSS。這是一個標準的XMLHttpRequest，並請求將通過瀏覽器的標準緩存機制緩存。一旦下載了CSS（文本），Aurelia會將它填充到<style>元素中，並以適當的方式將<style>元素附加到DOM，具體取決於是否使用scoped屬性以及該元素是否在陰影DOM中。

相關的代碼是here。

這種方法的好處是CSS導入與其他類型的資源（如HTML和JS）在相對路徑，捆綁和緩存方面具有一致的行爲。它還使Aurelia能夠處理scoped-css和shadow DOM場景。