Dynamically load ember components and routes on visit


Currently I have a pretty big Ember application with build size of approx 9MB :frowning_face: I am exploring options across dynamically loading the routes and components on visit. I tired with ember-auto-import but I didn’t find a way to split routes using this.

And Embroider is not a option as my ember version is below 3.28.11 which the pre-req. Any of them faced this kind of situation earlier or have you tried dynamic loading your ember app. Please suggest the method you tried and it’s impact too.

The only other feasible alternative I can think of is breaking them into lazy-loaded engines. I woudn’t necessarily recommend this though. That’s going to be a lot more trouble than it’s worth and is at best a short term fix.

The “real” strategy would be pushing through to Embroider so you can enable route based code splitting and not have to worry about it.


pre-embroider, if you extract all your "big stuff’ to v2 addons, you can await import them, which will be very manual, but it’ll allow you to load components as you need them (provided you’re on ember-auto-import@v2).

You could also make whole sub-trees of your app dynamic by configuring allowAppImports (introduced in ember-auto-import@2.7), and await importing from there