Skip to content

Instantly share code, notes, and snippets.

@joecritch
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

@joecritch joecritch 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