Any advantage to requiring a file within a function?

#1

I figure it probably depends on the minifier being used, but in Meteor’s case, is there any advantage to doing this:

export function blah() {
  const magic = require('magic');
  return magic(123);
}

as opposed to:

import magic from 'magic';

export function blah() {
  return magic(123);
}

Meteor doesn’t have the ability to conditionally load packages on-demand, does it?

#2

You missed what is great about Meteor 1.5, check out Ben’s blog entry.

Summary: Meteor supports dynamically importing modules at runtime. This reduces initial download package and can spread the download time across your app if used appropriately. As Ben explains, there are few compromises with the Meteor solution which I think really sets it apart.

Usage: see documentation.

Edited with more accurate usage description. thanks to @antoninadert’s comment.

#3

Great, thanks! Will this work when using Vue with Meteor? (via the akryum:vue-component package)

#4

I’m not using Vue, but I don’t see why it wouldn’t work. My code looks like

  Template.pwdStrengthBubble.events({
    'input #at-field-password': function(event, template) {
      import("zxcvbn").then(zxcvbn => {
        ...
        const result = zxcvbn.default(password, user_inputs=['correcthorsebatterstaple']);
        if (result.score == 0) {
          template.strength.set(result.score+1);
        } else {
          template.strength.set(result.score);
        }
        template.reason.set(result.feedback.warning);
      }
    }); // End of import
    }
  }); // End events

The zxcvbn NPM is over 400k in size and is only needed when creating an account so dynamically loading it only when needed shaves over 400k from my bundle size. This doesn’t mean much when running on a corporate network, but if you are on the typical ATT or Comcast connection, the difference is noticeable. Dynamic loading is probably the best thing in 1.5

#5

@ffxsam It’s worth looking at vue-router’s docs which talk about lazy loading using dynamic import(). See https://router.vuejs.org/en/advanced/lazy-loading.html.
Although it refers to webpack, I believe the same will be true for Vue on top of Meteor (with akryum’s packages). See also https://github.com/meteor-vue/vue-meteor/pull/215

1 Like
#6

Hello, I’m not sure that what you suggest will work, because looking at the documentation, it seems you should either have a promise:

import("tool").then(tool => tool.task());

or an async function:

async function performTask() {
  const tool = await import("tool");
  tool.task();
}

I also read the modules documentation, only to see that conditional imports cannot work, only require can work in an if statement. (except by using the 2 snippets above).

Am I missing something ? If so maybe the docs need to be updated !

2 Likes
#7

Thanks @antoninadert!

Sorry, you are right. You need to enclose in an async function along with using an await. I will update my post.

Yes, it looks like the new functionality is not in the modules documentation yet.

#8

I thought you said you didn’t want to use Meteor any more?

#9

That’s correct. We’re phasing it out slowly.