How to avoid loading all mustache templates on first page load with can-compile?

On the initial page load, our app was loading every mustache file in our app, causing the page load time to be huge. That initial page only used a couple mustache files, so it should only load the ones we need in that view.

We use grunt with can-compile to compile all those mustache files into one js file, but it was still loading all mustache files separately as well.

We were executing can.view like this
tag: 'address-form’
template: can.view("/assets/f75/components/address/address-form/address-form.mustache")

When we change that can.view to this (created by can-compile), it works as expected and doesn’t load any mustache files.

Is this the proper way of loading mustache templates when using can-compile? Or is this a hacked approach and there’s a better way?


app_assets_javascripts_f75_components_address_address-form_address-form_mustache is the name of the file compiled internally.

As you can see for some reason it adds an app in the beginning meaning that the compiled filename would match calls to can.view("app/assets/f75/components/address/address-form/address-form.mustache"). If that is the case for all files you can add a normalizer to fix the filename before compilation.