I have rather a large application, right now about 5mb for app.js and 1mb+ in vendor js. I assume it will cross 10mb, our target users are on slow internet and each user have different rights so most of the components are not available to a user.
I was thinking to exclude some big components from build process and load them on demand. So far I liked this idea https://github.com/Cryrivers/ember-remote-component/blob/master/app/components/remote-component.js where it checks if a component is loaded, if not then load them using AJAX
something like
if(!container.hasRegistration(`component:${ componentName }`)){
$.when(
$.getScript(`/remote-components/${ componentName }/component.js`),
$.getScript(`/remote-components/${ componentName }/template.js`)
).done(()=> {
let container = getOwner(this);
container.register(`component:${ componentName }`, require(`${ ENV.modulePrefix }/components/${ componentName }`).default, {singleton: false});
this.set('isLoaded', true);
})
}
I think this can work. But here are two questions
A: How to exclude a component from build process, and stop it from concatenating but also keep them in /dist/components/abc/ folder
B: Separate compile template.hbs to template.js for that component as compiling the template after loading via AJAX will cause huge performance issue.
This is not the exact solution the OP is looking for, but i think it is a better long-term solution :
I think lazy-loaded engines might be a better way to approach this problem. https://github.com/dgeb/ember-engines
You can prevent the majority of your app from loading for most users.
Experimental support for lazy-loading is available in the master branch as per the project's README.