Skip to content

Instantly share code, notes, and snippets.

@joecritch joecritch/README.md
Last active Jul 21, 2017

Embed
What would you like to do?
  • Context: I'm trying to load a jQuery plugin asynchronously, with Webpack code splitting. (I definitely don't want this as part of my main bundle, haha!)
  • I didn't use singlechunk.js because I want jQuery to be cached as its own dependency (in case I need to lazy load a different plugin somewhere else)
  • I'm currently using multichunks-but-blocking.js, but the waterfall shows that it waits for jQuery to finish downloading before attempting intl-tel-input.
  • Is there a way to download both jquery and intl-tel-input chunks in parallel, then execute once they're both downloaded? I'm guessing I might be able to use Promise.all, but struggling to get my head around what's meant to be static, etc.

(p.s. I can't use import() because I'm using Bublé)

function go() {
require.ensure(
['jquery'],
require => {
const $ = require('jquery');
require.ensure(
['intl-tel-input'],
require => {
require('intl-tel-input');
$(node).intlTelInput();
},
null,
'tel-input'
);
},
null,
'jquery'
);
}
function go() {
require.ensure(
['jquery', 'intl-tel-input'],
require => {
const $ = require('jquery');
require('intl-tel-input');
$(node).intlTelInput();
},
null,
'jquery-plus-tel-input'
);
}
@joecritch

This comment has been minimized.

Copy link
Owner Author

commented Jul 21, 2017

I was hoping this might work...

function r(chunk, deps) {
  return new Promise((resolve, reject) => {
    require.ensure(
      deps,
      require => {
        resolve(require);
      }
    )
  }, chunk);
}

Promise.all([
  r('jquery', ['jquery']),
  r('tel-input', ['intl-tel-input'])
]).then(require => {
  const $ = require('jquery');
  require('intl-tel-input');
  $(node).intlTelInput();
});

But the dependencies can't be statically extracted.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.