javascript - 模板与 templateUrl 以及样式与 styleUrls - 性能

Question

在 Angular 2 中，我们可以对模板和样式使用内联或 url 方法。使用 url 有利于模块化、可读性，并且 IDE 还提供代码帮助。使用 url 会导致浏览器发出额外的请求，这可能会导致性能下降。使用模板和样式的推荐方式是什么 - 内联还是 url？

示例来自 Angular 2 cheatsheet

template: 'Hello {{name}}'
templateUrl: 'my-component.html'    

styles: ['.primary {color: red}']
styleUrls: ['my-component.css']

Answer 1

说得好

Using url is good for modularity, readability and IDEs also provide code assistance. Using url will result in additional request from browser which might cause some performance drop

但这取决于我们根据 @mgchev 风格指南我们的代码有多长

Extract the more complex and bigger templates, longer than 15 lines of code, into a separate file and put them next to their controllers' definition.

Why?: In case a big and complex template is inlined in the component metadata it may shift the focus from the component's logic defined within the controller.

但是如果我们查看官方的风格指南，它会告诉我们如果编码超过 3 行就使用单独的文件

Do extract templates and styles into a separate file, when more than 3 lines.

同样的情况也适用于 Css 样式，因此如果我们有复杂的代码，最好提供外部 url 而不是内联。另请参阅此处:

• https://mgechev.github.io/angular2-style-guide/
• https://angular.io/styleguide