Add support for dynamic import()

[gaearon]

Update: @shubheksha will be working on this. Please coordinate with her on specific parts you want to help with.

Now that it's stage 3 we can add it.
We should also add relevant documentation (add a "Code Splitting" section to User Guide).

Since we use Webpack 1.x for now, I think we need https://github.com/airbnb/babel-plugin-dynamic-import-webpack but I'm not entirely sure.

TODO items here:

• Figure out which Babel plugin implements current version of https://github.com/tc39/proposal-dynamic-import and compiles down to require.ensure.
• Add said Babel plugin to babel-preset-react-app.
• Figure out what should happen in the test environment. Probably need to add some sort of a fallback that turns it into Promise.resolve(require(moduleName)).
• Add documentation about using code splitting.
• Ship it!

Let us know if you want to help. I won't have time to work on this.

Please leave a comment below if you want to work on this. If somebody is already working on it, please offer to collaborate with them if you like. Don't try to "be there first" if somebody is already working on some part of this. Please collaborate in this issue and split responsibilities.

I'm excited about finally having a way to code split JS code without Webpack-specific syntax!
And when we switch to Webpack 2, we'll change to a different plugin (or maybe won't need it at all?)

[SpaceK33z]

And when we switch to Webpack 2, we'll change to a different plugin (or maybe won't need it at all?)

webpack 2 has support for import() already (note: only in master, hasn't been released yet). See also webpack/webpack#3413 for more info.

[gaearon]

Awesome, thanks for chiming in. We'll migrate to WP2 once it's stable, good to know we can throw some parts away then!

[bmeck]

airbnb/babel-plugin-dynamic-import-webpack#12 see concerns

[karlhorky]

webpack 2 has its first release candidate!

https://medium.com/webpack/webpack-2-2-the-release-candidate-2e614d05d75f#.o50xf63bo

I guess the final stable release will come soon.

[Timer]

@gaearon your comment here just reminded me of this; should we disallow the usage of require.ensure once we add support for import() (or switch to webpack 2)?
AFAIK require.ensure is webpack-specific and in the future if we switch away from webpack (e.g. pundle) we'd have to polyfill it.

[gaearon]

Yea, could write a lint rule for this.