Question

我正在构建一个ember应用程序，它开始变大。有没有办法延迟加载ember文件，以便在用户第一次点击网站时加载需要10多秒？例如，因为我有几个逻辑上独立的模块作为站点的一部分，我可以在访问时加载模块。我在rails和ember-rails gem上使用ruby。

Answer 1

如果你想一想Ember实际上在做什么来渲染代码，你就可以理解为什么它很慢。假设您正在创建2k视图实例，并渲染2k模板。模板在很大程度上做得很少。特别是如果你不关心数据绑定。

对于第一次尝试，让我们停止通过模板进行渲染。此代码使用itemViewClass使用自定义视图呈现每个项目，而不是each在内部使用的视图。

// Use with {{each item in items itemViewClass=App.SpanView}}
App.SpanView = Em.View.extend({
  render: function(buffer) {
    buffer.push("<span>"+this.get('content')+"</span>\n");
  }
});

JSBin：http://jsbin.com/enapec/35/edit66

渲染过度，我们需要自己与渲染缓冲区进行交互。

更快就是彻底摆脱视野。我认为有两种方法可以做到这一点。您可以使用render方法创建一个自定义视图，该方法循环遍历所有项目，并将每个元素推送到缓冲区。我认为，鉴于上一个例子，你可以自己解决这个问题。

另一个简单的选择是使用帮助器。这样一个愚蠢的帮手更难以在列表更改时连线重新渲染，但有时它是正确的解决方案。

// Use with {{eachInSpan items}}
Em.Handlebars.registerBoundHelper('eachInSpan', function (items) {
  return (
    new Handlebars.SafeString(
      items.map(function (i) {
        return '<span>'+i+'</span>';
      })
    )
  );
});

直播JSBin：http://jsbin.com/enapec/34/edit

最后，您可以使用didInsertElement和afterRender队列在jQuery中执行此操作。我不推荐它。

Ember.RenderBuffer收集有关视图的信息并生成最终表示。 Ember.RenderBuffer将生成可以推送到DOM的HTML。

仅供参考 RenderBuffer API

<强> DEFINED IN

MODULE ： Ember-views

我也是新蜜蜂，但我从某种资源中得到了这个。感谢。

Answer 2

在2016年伦敦Embercamp的主题演讲中，@ wycats和@tomdale谈论了通过切片和切割应用来改善Ember的计划。他们谈论只加载特定路线所需的东西。这将是伟大的。我认为这就是你想要的：）

https://www.periscope.tv/w/1mrGmzPBvQqJy#

一次只加载Ember应用程序的一部分

2 个答案: