How can I Lazy Load templates into the client?

I know there are a few resources out there but I just wanted to get it into the new forums.

Not in a clean way. This is the only thing keeping me from recommending Meteor for a large application. I can’t tell them “well your clients either download several megabytes with each update or you implement this cumbersome hacky patchwork to do incremental loading”.

While it might feel like a good thing to wait for an official MDG solution, there are a number of packaged solutions addressing this issue. The two I recommend you look at are not “cumbersome hacky patchworks”, but are well crafted packages (one for resources you want publicly available - general client stuff, and one for private resources - admin components and the like):

https://atmospherejs.com/numtel/publicsources
https://atmospherejs.com/numtel/privatesources

1 Like

I do consider creating a new route and keeping track of the files used by that route (every time you introduce a new template) to be very cumbersome.

Imagine a large app and just one of its screens has 5 tabs. With the current solutions you have to create 5 routes and explicitly load what each tab needs. Now multiply this by the hundreds of screens a large app can have. Not to mention that you’re losing minification in the process.

In that case you might as well lose database reactivity and go with an MVC framework, which are better suited for that kind of design / workflow.

Wow, this is interesting. I don’t quite understand how this is going to work with a meteor app in production where the deploy step basically combines all the .js files.

Hello all, I know this is an old conversation but this is the top search result for “meteor lazy load” so I wanted to update this discussion to be current.

As of Meteor v1.5 (May 2017), Meteor now has true lazy loading of client-side assets. You can read more about it at the blog post here: https://blog.meteor.com/announcing-meteor-1-5-b82be66571bb

The basic gist is that you use the import() function instead of the regular import ... statement to download and load the javascript file on-demand. This gives you control over when assets are sent to the client and is great for speeding up your main use cases without having to download extra stuff like admin pages.

For those wondering how to do it with Blaze templates, have your myTemplate.js file do a regular import './myTemplate.html' and/or import './myTemplate.css'. Then use the new await import('/imports/client/myTemplate') syntax to pull it all down when needed. The Blaze templates will then be pulled and available as normal.

2 Likes