在AngularJS中预取模板有什么好处吗？

Question

我有一个关于优化应用程序的问题。我有一个包含多个指令的应用程序，因此我决定为它们构建单个最小化的CSS和JS文件。但与此同时，我也在考虑另一种方式。

如果我也构建一个大的、最小化的HTML文件会怎样？Angular允许从script标记中包含模板: <script type="text/ng-template" id="tempName"> Template content </script> 如果是这样，将每个指令的HTML注入到一个大文件中会有什么不利之处吗？它是否比多个小文件更好，并在需要时触发请求？ 我知道，如果我们有多个视图的大型应用程序，但用户只停留在其中的几个视图上，那么效果就不会很好。我的想法是针对较小的指令构建此文件，这不应该引起任何问题，对吧？

你对此有什么看法？

- deem

---

你的问题是否仅限于模板？ - bhantol

是的，正如我在问题中所说的那样，我已经将JS和CSS最小化，并且正在考虑HTML问题 - 指令的小模板是我的应用程序中的大问题，当我看到每个指令运行另一个小请求时，这让我感到痛苦。 - deem

去试试吧。已经有工具可以做到这一点，例如 https://www.npmjs.com/package/gulp-angular-templatecache 可以将所有模板转换为 template.js 文件，您只需在 indes.html 中包含即可。 - bhantol

不知道这个工具的存在 - 看起来对我很有帮助 - 我会试一试，谢谢。 - deem

将您的问题标题更改为最大限度地引起关注并使其更具体。 - bhantol

Answer 1

像任何事物一样，使用缓存模板的方法存在优点和缺点。

优点：

• 无需获取模板-适用于离线功能
• 如果网络较慢，获取模板可能会导致指令、路由或包含数据的页面出现延迟。在这种情况下，预取可以提高流畅性。
• 预取还会预编译模板，使其准备好放入模板缓存中供后续使用。

缺点：

• 在大型应用程序中，如果所有模板都被预取，我们将占用更多内存来存储所有模板，而只有少数模板可能会被使用。
• 如果在加载期间获取预取的模板，会导致额外的请求。

如果您的应用程序中优点超过缺点，则可以使用一些构建工具，例如:

• gulp-angular-templatecache
• webpack-templatecache
• grunt-angular-templatecache
• ...等等

- bhantol

Answer 2

每个包含的文件都是浏览器需要来回请求的额外请求，因此，如果您可以将它包含在同一页中，那么它将更快，更高效。将其分为多个文件的主要原因仅是为了组织，而不是为了页面加载时间的0.01毫秒的差异。

您还可以使用类似grunt的工具来处理单独的文件，然后让grunt自动为您合并和压缩文件以进行即时优化。

- Whale Pool

---

虽然是真的，但对于可读性和可维护性来说，文件的大小应该有一个合理的限制。我不想在一个将整个 Angular 应用程序放在一个文件中的项目上工作。不过，你的 Grunt 建议很好。 - isherwood