在 angularjs 中预取模板有什么好处吗？答案

【问题标题】：Are there any benefits of pre-fetching templates in angularjs?在 angularjs 中预取模板有什么好处吗？
【发布时间】：2017-01-04 06:49:02
【问题描述】：

我有关于优化应用程序的问题。我有多个指令的应用程序，所以我决定构建一个分钟。为他们所有的 css 和 js 文件。但与此同时，我也在想另一种方式。

如果我还要构建一个大的、最小化的 HTML 文件会怎样？ Angular 允许包含来自script 标签的模板：

<script type="text/ng-template" id="tempName"> Template content </script>

如果是这样，将每个指令的 HTML 注入一个大文件会有什么缺点？它会比多个小文件和在需要时触发请求更好吗？我知道，如果我们有具有多个视图的大型应用程序，但用户只停留在其中的几个视图上，那就不是太好了。我的想法是为更小的指令构建这个文件，这应该不会导致任何问题，对吧？

你怎么看？

【问题讨论】：

您的问题是否仅限于模板？
是的，正如我在问题中所说的那样，我已经最小化了 JS 和 CSS，并且正在考虑 HTML 问题 - 用于指令的小模板在我的应用程序中是个大问题，当我看到它“伤害”我每个指令如何运行另一个小请求。
去吧。已经有工具可以做到这一点，例如npmjs.com/package/gulp-angular-templatecache 将所有模板吐出到 template.js 中，您可以将其包含在 indes.html 中
不知道这个工具存在 - 对我来说似乎是一个答案 - 我会尝试一下，谢谢。
更改您的问题标题以获得最大的关注并使其更加具体。

【解决方案1】：

就像任何东西一样，这种缓存模板的方法也有利弊。

优点：

缺点：

如果您的应用程序中的优点超出了您可能需要使用一些构建工具，例如如：

【讨论】：

【解决方案2】：

您包含的每个文件都是浏览器必须来回发出的附加请求，因此，如果您可以将其包含在同一页面中，那么它将更快、更高效.. 排除在多个文件中的主要原因只是为了组织与页面加载时间的 0.01 毫秒不同。

您还可以使用诸如 grunt 之类的工具来处理单独的文件，然后让 grunt 自动为您连接和缩小文件以进行动态优化。

【讨论】：

虽然如此，但为了可读性和可维护性，文件的大小应该有一个合理的限制。我不想在一个文件中包含整个 Angular 应用程序的项目上工作。不过，你的 Grunt 建议不错。