Request for guidance with a code splitting pattern

Hello and thank you for taking care of Flow Router! I’m looking forward to taking advantage of all the nice new features implemented in flow-router-extra.

I only recently switched over from the abandoned Kadira-version, so apologies if I’ve missed something, but I couldn’t find guidance in the docs for the following scenario. I think the changes in this.render vs. BlazeLayout.render might be throwing me off.

I’m trying to accomplish a pattern, where only my login page and few selected components are included in the initial bundle, and rest of the app is loaded with dynamic imports when accessing other routes.

My first implementation tried to achieve this by using a different layout for the remaining routes, called app_layout, that would import rest of the app when rendered.

Template.app_layout.helpers({
  initializationComplete() {
    return Template.instance().initialized.get();
  }
});

Template.app_layout.onCreated(function () {
  this.initialized = new ReactiveVar(false);
  import('../initialize_app').then(() => this.initialized.set(true));
});

// initialize_app.js
import './help';
import './main_layout';
import './header';

<template name="app">
    {{#if initializationComplete}}
      {{> yield}}
    {{/if}}
</template>

…and my route definitions are like this:

FlowRouter.route('/', {
  name: 'landing',
  waitOn() {
    return import('../../client/modules/index');
  },
  action() {
    this.render('app', 'main_layout', {
      content: 'index',
      header: 'header',
      footer: 'help'
    });
  }
});

I was expecting the app_layout to import the commonly used main_layout, header and help templates, and once imported, render the {{> yield }} content.

However, this breaks with the following error thrown on client:

Exception from Tracker afterFlush function:
meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1059 Error: Can't render undefined
    at checkRenderContent (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2285)
    at contentAsFunc (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2328)
    at Object.Blaze.renderWithData (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2401)
    at BlazeRenderer.materialize (renderer.js:341)
    at Blaze.TemplateInstance.<anonymous> (renderer.js:65)
    at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3398
    at Function.Template._withTemplateInstanceFunc (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3769)
    at fireCallbacks (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3394)
    at Blaze.View.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3487)
    at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:1845

That had me thinking, maybe I should dynamically import the main_layout in the waitOn hook, and include the named slots in the template (as instructed in a few places), but then I would have to pepper all my route definitions with waitOn on the main_layout, since I never know which route the user chooses to access initially. Then again, I don’t want to include main_layout in the initial bundle, as it uses a whole lotta other components that I’d rather not include in the login-only-initial-bundle.

Maybe I’m just confused from doing too much refactoring on a large codebase in the last 48hrs, but I’d gladly accept any help on how to get started with this sort of app loading pattern and flow-router-extra!

[coagmano]

Meteor will de-dupe dynamic imports and use the client side cache for modules being requested more than once, so sticking it in waitOn is a viable strategy.

Even better, you can make a group with the waitOn defined and it will apply to all routes added to that group:

const loggedInGroup = FlowRouter.group({
  name: 'logged-in',
  triggersEnter() {
    // redirect if not logged in etc.
  },
  waitOn: () => import('./common_code')
});
// then define the routes that depend on common_code:
loggedInGroup.route('/example', {
  // ...
});

Only issue I can think of is that triggersEnter runs after waitOn so redirection also waits

[arggh]

Sure. Please re-open if you actually would like a PR about this (I got the feeling that you didn’t see the value)?

And in that case I would like some opinions on which strategy (or all?) to document.