Angularjs 角度+；离子通过XHR加载所有内容

我们有一个Angular+Ionic应用程序，我们正计划在Cordova上运行，但性能有问题，我们正在努力追踪

当在本地或内置应用程序上运行时，我们在Chrome开发工具网络选项卡中看到的内容如下：

• CSS的重复加载
• XHR请求获取我们的Angular UI路由器链接到的每个模板文件，而不必访问路由

例如：

以及angular.js源中的第3167行（用星号表示）：

append: function(element, node) {
    var nodeType = element.nodeType;
    if (nodeType !== NODE_TYPE_ELEMENT && nodeType !== NODE_TYPE_DOCUMENT_FRAGMENT) return;

    node = new JQLite(node);

    for (var i = 0, ii = node.length; i < ii; i++) {
        var child = node[i];
        element.appendChild(child); *
    }
},

append:函数（元素、节点）{
var nodeType=element.nodeType；
if（nodeType！==NODE\u-TYPE\u-ELEMENT&&nodeType！==NODE\u-TYPE\u-DOCUMENT\u-FRAGMENT）返回；
节点=新的JQLite（节点）；
对于（变量i=0，ii=node.length；i

我从未见过类似的东西-我们检查了所有的基础（重复脚本/css包括，等等），禁用了离子缓存，等等

我把东西从鞋钉上拆下来，看看是什么导致了这一点，但希望其他人看到了这一点，并能就从哪里开始寻找提供一些建议

更新

重复的CSS似乎是由于我们的index.html文件，该文件引导我们的Angular应用程序被错误地指向UI路由器配置中的状态

---

因此，根本问题是应用程序中所有静态文件（角度ui模板、指令模板）的虚假/意外XHR拉入。

好的，当一个状态被激活时，模板会自动插入到其父状态模板的ui视图中

---

您应该检查您是如何定义状态的。和/或与我们分享您的状态定义：）

我处理html模板的方法是在编译时使用gulp ng模板或grunt angular模板（取决于您现在喜欢的任务管理器的风格）缓存它们

因为我们处理的是应用程序，所以内容最好是即时加载，而不是延迟加载（只要你以MB为单位计算它们的总大小），从而节省一些带宽并改善整体用户体验。此外，它可能会解决您的问题

在编译时缓存模板的好处在于，您的实现不需要知道它们来自哪里（服务器或缓存层），因此您不需要更改任何代码

---

另外，我知道我的回答不会解决您的实际问题，但可能会同时解决两个问题。

为什么XHR请求会重新加载index.html？@AndrewMcGivery-更新的问题-UI路由器错误地指向index.html文件，路由器中的所有东西都是通过Xhr“预加载”的，没有足够的信息来诊断问题。你能在Plunker中复制这个问题吗？没有足够的关于在html中调用element.append的信息。您可以在angular.js中引发异常，并找出该问题的原因。你的案子从来没有发生在我身上所以你解决了这个问题。。这是因为index.html中的问题？？