Repository navigation
Add support for dynamic import() #1192
Description
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?)
Activity
SpaceK33z commentedon Dec 7, 2016
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 commentedon Dec 7, 2016
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 commentedon Dec 7, 2016
airbnb/babel-plugin-dynamic-import-webpack#12 see concerns
karlhorky commentedon Dec 16, 2016
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 commentedon Jan 25, 2017
@gaearon your comment here just reminded me of this; should we disallow the usage of
require.ensureonce we add support forimport()(or switch to webpack 2)?AFAIK
require.ensureis webpack-specific and in the future if we switch away from webpack (e.g.pundle) we'd have to polyfill it.gaearon commentedon Jan 25, 2017
Yea, could write a lint rule for this.
gaearon commentedon Feb 11, 2017
@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 commentedon Feb 12, 2017
Per import-js/eslint-plugin-import#743 (comment), eslint core already supports
no-restricted-propertieswhich can easily block bothrequire.ensureandSystem.import.Timer commentedon Feb 12, 2017
@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 commentedon Feb 27, 2017
Support has been added in
master, see #1538 and #1615.