懒惰加载Ember应用程序

Question

我通常在这里搜索答案，但我最终找不到一个好的答案。

我希望构建一个ember应用程序，它只在最初加载启动和打开主路线所需的东西。当触发特定路由时，所有其他控制器、视图、模板等都将延迟加载。

我在这里找到了一个很好的例子来说明如何适应这一点：http://madhatted.com/2013/6/29/lazy-loading-with-ember

我的主要问题是确定哪些构建工具支持这种延迟加载应用程序代码的理论？到目前为止，我已经看到Brunch、Yeoman和Ember应用工具包似乎缩小并连接了所有的脚本和模板。我很高兴缩小，但需要这些文件分开。我考虑过把这个代码放在应用程序/资产的位置，这样它就可以在没有concat的情况下复制，但不会被缩小。

有人有解决方案吗？谢谢

Answer 1

您可以通过在早午餐配置中添加以下内容来实现早午餐

files: {
    javascripts: {
        joinTo: {
            'javascripts/app.js': /^app(/|\)(?!admin)/, // concat everything in app, except /app/admin
            'javascripts/vendor.js': /^vendor/,
            'javascripts/admin.js': /^app(/|\)admin/ // concat only /app/admin
        }
    }
}

Grunt（用于yeoman和ember应用套件）非常灵活，所以我相信你可以通过深入Gruntfile.js

Answer 2

问题是："我想构建一个ember应用程序，它最初只加载启动和打开主路由所需的东西。当触发特定路由时，所有其他控制器、视图、模板等都会延迟加载。".

Ember希望在加载页面时，能在那里找到它需要的任何东西。我不会错，但懒惰加载路线似乎不是Ember的一个特点。Ember CLI也是如此。它使用捆绑和缩小来减少过载。但一切都应该在那里，让它发挥作用。

相反，像我这样的人只想在需要的时候加载东西。

当你试图在Ember中实现懒惰加载时，所有的东西都应该用一个模块（file.js）来表示：一个路由，一个模块；控制器、模块；等等你应该遵循一个模式（比如POD），对它应用一种机制来找到它们应该在的地方。每个模块都应该知道它的依赖关系。但其中一些非常频繁（路由、控制器、模板）。您应该为浏览器使用模块加载程序。它可以是requirejs或任何你喜欢的东西。但ES6就在门口。让我们考虑一下。

许多人使用beforeModel钩子来实现一个结果。我做到了，如果您不使用link-to组件，它就可以工作。否则一切都会崩溃。为什么？由于href的计算属性。当插入了link-to时，会为其计算href。因此，Ember会查找链接指向的路由。如果该路由不存在，则会从route:basic创建一个。

一个解决方案可以是预加载页面中插入的所有链接所表示的所有路由。太贵了！

这个答案的集成可以在Ember.js 中的Lazy加载路由定义中找到

对于POD中组织的路由延迟加载的初始解决方案，请查看https://github.com/ricottatosta/ember-wiz.这是一种基于ES6的方法，它以SystemJS作为模块加载程序。