Adds support for dynamic imported modules in DOM-Router

[vkryukov76]

ref #2041

[swalkinshaw]

This feature would be awesome to have in Sage but I think there's two more requirements for it:

• nicer API to make it simpler to use. I don't think uses should need to write all that boilerplate since 99% of the time it would be the same?
• promises polyfill automatically included for IE support. Or at least an option to enable/disable this.

Why can't import work here? I don't know too much about this, but just wondering why we need to use the old Webpack specific legacy require.ensure

[QWp6t]

From the link you posted in #2041

Two similar techniques are supported by webpack when it comes to dynamic code splitting. The first and more preferable approach is to use the import() syntax that conforms to the ECMAScript proposal for dynamic imports. The legacy, webpack-specific approach is to use require.ensure. Let's try using the first of these two approaches...

[vkryukov76]

There are two issues that prevent to use modern import() syntax:

• First one: outdated buble-loader dependency. It could be resolved by simple version bump in package.json
• Second (the main one): ESlint doesn't support import() statement by default (see Parse error with import() eslint/eslint#7764) . The only way to enable it that I know is Babel Eslint parser. Roots has switched from Babel to Buble for performance reasons, as I know. And require all Babel stuff only to support some non-standard (yet) feature seemed as a wrong approach to me.

[vkryukov76]

nicer API to make it simpler to use. I don't think uses should need to write all that boilerplate since 99% of the time it would be the same?

Unfortunately (again) as I know that's how dynamic import feature works. The modern approach is less verbose than require.ensure because it already returns promise.

But in both cases, we need directly pass module path as a string (not a variable). If we wrap all the magic in a function like:

export default (route) => new Promise((resolve) => require.ensure(route, (require) => {
    resolve(require(route));
  })
);

It will not work because Webpack will not understand that he should split code into chunks.

[retlehs]

thank you for the PR! i tried to get this to work to see if we could sneak it into sage 9 but didn't have luck

i'm going to close this out because @austinpray and @QWp6t will be working on this as part of sage 10/#2122