Lazily load HTML templates

Help Requests
1

I’m trying to improve startup performance of our Aurelia app and noticed some elements are getting loaded at startup well before they’re ever displayed.

Looking at the debug output, most of our custom elements are getting loaded straight away as Aurelia follows all the HTML <require>'s from the root App out. I don’t think the impact is that huge when bundled but It looks like the only things that limits templating from importing every resource is the router, compose elements and dialogs.

We have a large <graph> element with dozens of sub-elements which is normally only displayed to users on a specific route. This graph element is also hosted in an <off-screen-render> element which can be used via the OffScreenRenderService to render graph images from on any route. This is used for doing things like generating thumbnail images when saving. Currently, the <off-screen-render> element is therefore in the main App and is loaded at startup even though it’s hidden via if.bind.

Can anybody think of a solution which isn’t as hacky as using a <compose>?

2

It looks like delaying loading resources really is as simple as:

<compose if.bind="osrService.enabled" view-model="./graph/off-screen-render"></compose>

Although if you do this you lose the ability to use bindable properties.

3

You can split the code into multiple bundles. With webpack you may pass a second parameter to PLATFORM.moduleName function which will push the referenced module to another bundle