Lazy Loaded Ember Application

Question

I am typically searching for answers here but I finlly gotten to the point where I can't find a good answer.

I am looking to build an ember app which only initially loads in the things that it needs just to start and open the main route. All other controllers, views, templates, etc. Would be loaded lazily when a specific route gets triggered.

I have found a good example of how to accomplIsh this here: http://madhatted.com/2013/6/29/lazy-loading-with-ember

My main question is to determine what build tools out there support this theory of lazy loading application code? So far, I've seen that Brunch, Yeoman, and Ember App Kit seemed to minify and concatenate all the scripts and templates. I am very happy with minification but need those files separate. I have thought about just putting this code into the app/assets location so that it gets copied over without concat but it does not get minified.

Does anyone have a solution? Thanks!

Answer 1

You can do this with brunch by adding the following to your brunch config

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 (used in yeoman and ember app kit) is ridiculously flexible, so I'm sure you can set up the same thing there by diving into Gruntfile.js

Answer 2

The question was: "I am looking to build an ember app which only initially loads in the things that it needs just to start and open the main route. All other controllers, views, templates, etc. Would be loaded lazily when a specific route gets triggered.".

Ember expects to have anything it needs right there when the page gets loaded. I wouldn't be wrong, but lazy loading of routes doesn't seem to be a feature of Ember. Ember CLI is the same. It uses bundling and minification to reduce the overload. But everything should be there to make it work.

Instead, people like me would like to load things only when they are required.

When you try to implement lazy loading in Ember, everything should be represented by a module (file.js): a route, a module; a controller, a module; and so on. You should follow a schema (like POD), to which apply a mechanism to find things where they are supposed to be. Every module should know its dependencies. But some of them are very frequent (route, controller, template). You should use a module loader for the browser. It can be requirejs or whatever you like. But ES6 is at the door. Let's think about that.

Many people use beforeModel hook to achieve a result. I did it, and it works, if you don't use link-to component. Otherwise everything crashes. Why? Because of href computed property. When a link-to has been inserted, an href is calculated for it. Because of that, Ember looks for the route where the link points to. If the route doesn't exist, one is created from route:basic.

A solution could be the preloading of all the routes represented by all link-tos inserted in the page. Too much expensive!

An integration to this answer can be found at Lazy loading route definitions in Ember.js

For an initial solution to lazy loading of routes organized in POD, have a look at https://github.com/ricottatosta/ember-wiz. It is an ES6 based approach, which relay on SystemJS as module loader.