Question

使用Angular，您有两种选择来加载脚本（js和css）：

在index.html中：<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
在angular.json中："styles": ["node_modules/font-awesome/css/font-awesome.css"]

每个选项的优点是什么？据我了解，angular.json中的内容是捆绑在一起的，而index.html中链接的脚本是动态加载的。因此，归结为讨论是否最好是预先打包脚本或加载它们，例如从CDN？或者将脚本放入angular.json中还有其他好处，例如组织性质的？是出于某种原因“清洁”吗？

Answer 1

基本上，这是由Angular团队有意设计的。简而言之，是的，您可以使用任何一种，对于简单的项目，您将看不到任何区别。但是两者之间几乎没有区别。

如果您将样式/脚本文件数组添加到项目的全局上下文中（如果您将其添加到angular.json文件中，则它们也将在构建时包含在捆绑包中，就像您定义文件/ index.html中的CDN将单独加载。
据我了解，通过索引文件加载的资产不会复制到捆绑包中，而是会显示在网络标签中。

angular.json

资产将具有更多功能，例如-
1. glob：使用输入作为基本目录的node-glob。
2. 输入：相对于工作区根的路径。
3. 输出：相对于outDir的路径（默认为dist / project-name）。由于存在安全隐患，CLI永远不会在项目输出路径之外写入文件。
4. ignore：要排除的全局列表。

例如-

{ "glob": "**/*", "input": "src/assets/", "output": "/assets/" },

或

{ "input": "src/external-module/styles.scss", "inject": false, "bundleName": "external-module" }

有关更多信息，强烈建议您阅读此书-

https://angular.io/guide/workspace-config

应该将脚本放入angular.json还是index.html？

1 个答案: