# Lazily load HTML templates

**URL:** <https://discourse.aurelia.io/t/lazily-load-html-templates/708>\
**Category:** Help Requests\
**Created:** [January 29, 2018, 3:26pm UTC](https://discourse.aurelia.io/t/lazily-load-html-templates/708 "2018-01-29T15:26:37Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![timfish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/timfish/32/1566_2.png) [@timfish](https://discourse.aurelia.io/u/timfish)\
**Post date:** [January 29, 2018, 3:26pm UTC](https://discourse.aurelia.io/t/lazily-load-html-templates/708/1 "2018-01-29T15:26:37Z")

</div>

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>`?

---

<div class="post-metadata">

**Author:** ![timfish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/timfish/32/1566_2.png) [@timfish](https://discourse.aurelia.io/u/timfish)\
**Post date:** [January 29, 2018, 3:37pm UTC](https://discourse.aurelia.io/t/lazily-load-html-templates/708/2 "2018-01-29T15:37:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [January 29, 2018, 11:49pm UTC](https://discourse.aurelia.io/t/lazily-load-html-templates/708/3 "2018-01-29T23:49:09Z")

</div>

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