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包括等),禁用了离子缓存等.

我正在剥离螺栓以查看可能导致这种情况的原因,但希望其他人已经看到这一点,并可以提供一些建议,从哪里开始寻找.

UPDATE

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

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

Answer 1

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

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

Answer 2

我处理html模板的方法是使用gulp-ng-templates或grunt-angular-templates(取决于你现在喜欢的任务管理器的风格)在编译时将它们全部缓存.

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

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

PS我明白我的答案不会解决您的实际问题,但它可能同时解决2个问题.