Large app - how to selectively send templates to the client

I have a fairly large Meteor app that’s now in production.

Currently, the entire client side is bundled and sent on page load. That’s every template, every script, every CSS file.

Adding to this site now makes me cringe, because it means every new addition gets tacked on to the initial page load.

How is one supposed to cope with this as your app grows into something quite large?

SSR? Or something else?

Recommend replacing your imports with dynamic imports:

It’s a decently big refactor for an existing app but can pay off in spades. I work on an app that bundles a lot of quite heavy templates with very different heavy dependencies. Refactoring with dynamic imports saved 90% of the initial bundle.

Looks like SSR is coming in 1.5.1 too, which will help time to first render:

1 Like

This is just what I was looking for!

Is there any way to dynamically import CSS as well? I didn’t see that reading some articles on it just now.

There is, but it’s less nice.

Basically you import your css/scss/less/styl file from the dynamically imported js file and it will be inserted in <style> tags in the <head> of your page.

eg: you have main.js and three files for your template foo.html, foo.js, and foo.css

// main.js:
import('/imports/ui/foo.js').then( () => { FlowRouter.go('/foo'); });

// foo.js
import './foo.html'; // import blaze template/jsx/etc
import './foo.css'; // import css/scss/less/etc
// ^^^ These will both be included in the bundle when foo.js is dynamically imported.

Template.foo.onCreated(function () {
 /// etc.
});