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场景。