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

当通过<require>标签导入CSS资源时,ES6模块加载器(由SystemJS填充)用于下载CSS.这是一个标准的XMLHttpRequest,请求将由浏览器的标准缓存机制缓存.下载CSS(文本)后,Aurelia <style>会将其填充到元素中,并<style>以适当的方式将元素附加到DOM,具体取决于是否使用了scoped属性以及元素是否在shadow DOM中.

相关代码在这里.

这种方法的好处是CSS导入在相对路径,捆绑和缓存方面与其他类型的资源(如HTML和JS)具有一致的行为.它还使Aurelia能够处理scoped-css和shadow DOM场景.