Create-react-app: 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 https://github.com/webpack/webpack/pull/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.

[gaearon]

@Timer Can you give me a hint of what’s required if we assume the baseline is Webpack 2? Do we just need to add support for dynamic import in Jest? @shubheksha had a branch in progress but we didn’t go forward because it wasn’t clear if Webpack 2 would arrive first. Now that we switched to it, need to re-evaluate what’s still necessary.

[ljharb]

Per https://github.com/benmosher/eslint-plugin-import/issues/743#issuecomment-279203692, eslint core already supports no-restricted-properties which can easily block both require.ensure and System.import.

[Timer]

@gaearon we compile our code before Jest gets it, so we just need to add babel support for import() (babel-plugin-syntax-dynamic-import).

This PR should contain the only required changes: #1538.

[Timer]

Support has been added in master, see https://github.com/facebookincubator/create-react-app/pull/1538 and https://github.com/facebookincubator/create-react-app/pull/1615.