What is the use of lazy loading in Meteor?

Question

I have the following application structure:

client/
---- main.js
imports/
---- startup/
-------- client/
------------ routes.js
---- ui/
-------- login/
------------ login.html
------------ login.js
-------- register/
------------ register.html
------------ register.js

Below are the contents of the files:

client/main.js

import "/imports/startup/client/routes.js";

imports/startup/client/routes.js

import "../../ui/login/login.js";
import "../../ui/register/register.js";
// other routing code

imports/ui/login/login.js

import "./login.html";
// other login code

imports/ui/register/register.js

import "./register.html";
// other register code

When I run my meteor app and check out the JS file app.js loaded in the sources in Chrome DevTools, I find that both login and register templates have loaded. I understand why this happens.

What I don't understand is the point of lazy loading in this case. All my templates and HTML is getting loaded in the same way as eager loading.

Is there something wrong with my app structure? I'm following the suggested app structure in meteor guide: https://guide.meteor.com/structure.html#example-app-structure

Or maybe I don't understand lazy loading properly?

Weinberger

Unless something changed in the latest version, the term does not mean what you expect. It simply goes to say that within import dirs, files are not bundled unless imported. Code splitting is not available right now using the meteor build tools and everything that is bundled and interpreted on startup. – Butterscotch

Answer 1

I know this is an old question but this is the third highest search result for "meteor lazy load" so I wanted to update this discussion to be current.

The original question is confused a bit between "lazy loading" and "lazy evaluation". When the question was written Meteor had just implemented "lazy evaluation" rather than lazy loading. Currently Meteor supports eager evaluation, lazy evaluation, and true lazy loading (downloading assets on-demand).

For a full discussion, see the section on Application Structure in the Meteor Guide.

Eager Evaluation

One of Meteor's goals has always been to be extremely easy to use and quick to get started with so since the beginning it has supported "eager evaluation" of source files: it will automatically evaluate all javascript/html/css/coffeescript/jade/react/etc files that it can find. (Now there are special cases such as the imports directory, see below.) This lets beginners get apps up and going quickly without worrying about load order or updating references when moving or renaming files and such.

Lazy evaluation

As of Meteor v1.3 (March 2016), you can also explicitly control when files will be evaluated using the standard ES2015 and CommonJS syntax for "import" and "export". This is how regular node apps work and has benefits for maintaining larger code bases.

In order to still support eager evaluation, Meteor will normally only lazy evaluate files found in an 'imports' directory. As of Meteor v1.7, you can also opt-in to full-lazy evaluation for the entire app by specifying explicit entry points for client and server. See the Meteor 1.7 announcement post for more, under "custom entry point modules".

Lazy loading

As of Meteor v1.5 (May 2017), Meteor now has true, lazy loading of client-side assets. This lets you not only control when a file is evaluated, but also when the file contents are sent over the wire to the client.

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 import() instead of the regular import ... 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.

Bonus: Smaller payloads for modern browsers

As of Meteor v1.7 (May 2018), Meteor will now automatically deliver an optimized bundle for modern "evergreen" browsers (the ones that update themselves). This means all the extra polyfills and workarounds that are normally included by projects such as babel in order to let your modern code syntax run on older browsers will not even be included in the client-side payload!

Very exciting stuff, read more about it here:

https://blog.meteor.com/meteor-1-7-and-the-evergreen-dream-a8c1270b0901

Ecumenical

Thanks for the explanation, it helps a lot understand the difference. – Collett