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

Question

我对优化应用程序有疑问。我有多个指令的应用程序，所以我决定构建单分钟。所有的css和js文件。但与此同时，我正在考虑另一种方式。

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

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

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

你怎么看待这个？

Answer 1

就像这种缓存模板的方法一样，有任何优点和缺点。

<强>优点：

• 无需获取模板 - 适合离线功能
• 如果网络速度很慢并且此提取会导致一些延迟，因为指令，路由，包含必须解析templateUrl。在这种情况下，预取有助于改善手感的平滑度。
• 预取也可以预先编译准备好使用的模板，因为它放在templateCache中。

<强>缺点：

• 在大型应用程序中，如果预取了所有模板，那么当只有极少数模板被使用时，我们实际上会利用更多内存来存储所有模板。
• 如果在加载过程中提取了预取模板，则会导致其他请求。

如果专业人员超过您的应用程序，您可能需要使用一些构建工具  为：

• gulp-angular-templatecache
• webpack-templatecache
• grunt-angular-templatecache
• ......还有更多

Answer 2

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

您还可以使用类似grunt的东西来处理单独的文件，然后让grunt自动连接并缩小文件，以便您进行即时优化。