Angular + Ionic通过XHR加载所有内容

Question

我们有一个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); *
    }
},

我从来没有见过这样的东西 - 我们检查了所有基础知识（重复脚本/ css包括等），禁用了离子缓存等。

我将事情剥离到了铆钉上以查看可能导致这种情况的原因，但希望其他人看到这一点并提供一些建议，从哪里开始寻找。

更新

重复的CSS似乎是由于我们的index.html文件引导我们的Angular App错误地指向UI路由器配置中的状态。

所以根本问题是虚假/意外的XHR拉到应用程序中的所有静态文件（angular ui templates，指令模板）。

Answer 1

我处理html模板的方法是使用gulp-ng-templates或grunt-angular-templates（根据你现在喜欢的任务管理器的风格）在编译时将它们全部缓存。

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

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

P.S。我知道我的答案不会解决您的实际问题，但它可能同时解决2个问题。

Answer 2

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

您应该检查您的状态定义方式。和/或与我们分享您的州定义：）