在angularjs中预取模板有什么好处吗？ [英] Are there any benefits of pre-fetching templates in angularjs?

问题描述

我有关于优化应用程序的问题。我有多个指令的应用程序，所以我决定建立单分钟。为他们所有的CSS和JS文件。但与此同时，我正在考虑另一种方式。

如果我还要构建一个大而简化的HTML文件，该怎么办？ Angular允许包含来自脚本标记的模板：

< script type =text / ng-templateid =tempName>
模板内容
< / script>

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

您怎么看待这个？

解决方案

像这样的缓存模板的优点和缺点。优点：

• 无需获取模板 - 适用于离线功能


• 如果网络速度较慢，并且这个提取会导致一些滞后的指令，route，include必须解析templateUrl。在这种情况下，预取有助于改善手感的平滑度。


• 
  $ b $预取也预先编译准备使用的模板，因为它放入templateCache中。 b

  缺点：

  
  
  
  
  
  • 在大型应用程序中，如果所有模板都被预取，内存来存储所有模板，只有少数人可以使用。
  
  
  • 如果预取的模板在加载过程中被抓取，会导致额外的请求。
    
    

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

    
    
    • 吞噬角 - 模板缓存
    
    
    • webpack-templatecache
    
    
    • grunt-angular-templatecache
    >
    
    • ...以及更多
    
    
    
    

    I have question concerning optimising application. I have application with multiple directives, so I decided to build single min. css and js file for them all. But at the same time, I was thinking of another way.

    What if I would also build one big, minimalised HTML file? Angular allows including templates from script tag:

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

    If so, what would be downsides of injecting every directive's HTML in one big file? Would it be any better than multiple small files and firing request when they are needed? I know, that it wouldn't be so good if we have big application with multiple views, but user only stays at few of them. My idea is to build this file for smaller directives, that shoulnd't cause any problems, right?

    What do you think of this?

    解决方案

    Like anything there are pros and cons to this approach of caching templates.

    Pros:

    • No need to fetch the template - good for offline capability
    • If network is slow and this fetch is going to cause some lag as the directive, route, include must resolve the templateUrl. In such cases pre-fetching helps in improving the smoothness of feel.
    • Pre-fetching also pre-compiles the template ready to be used as it puts in the templateCache.

    Cons:

    • In a large application if all the templates are prefetched we are essentially utilizing more memory to store all the templates when only a handful might get used.
    • If the prefetched templates are fetched during loading it causes additional request.

    If the pros exceed in your application you may want to use some build tool such as:

    • gulp-angular-templatecache
    • webpack-templatecache
    • grunt-angular-templatecache
    • ... and more

    这篇关于在angularjs中预取模板有什么好处吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！