Add dynamic import support

[liyuanqiu]

Expected Behavior

Add dynamic import support. It is widely used in lazy loading and code splitting scenarios.

Current Behavior

Now all dependencies imported using import() won't be added to the graph.

Possible Solution

Context

import() now is a proposal:
https://github.com/tc39/proposal-dynamic-import

Webpack lazy loading and code splitting:
https://webpack.js.org/guides/lazy-loading/
https://webpack.js.org/guides/code-splitting/

React code splitting
https://reactjs.org/docs/code-splitting.html

[sverweij]

hi @liyuanqiu thanks for raising this. It's a long standing wish (see this item on the backlog) - for typescript (where it's a first class citizen already)- and this issue helps me look into it again.

The reason dependency-cruiser doesn't support it directly yet, is because it uses acorn to parse javascript. acorn will support dynamic import(), but only when the tc39 proposal is in stage 4 (source: Marijn's response in issue 477 in the acorn repo). Currently the proposal is in stage 3, however.

That said, there's options I can look into to work around the issue. No guarantees, though...

• Babel down the import to a construct that's part of official ecmascript (for the purposes of dependency-cruiser a simple require would suffice).
• Use typescript for the same.
• Swap out acorn for esprima or espree (esprima seems to support it according to this pull request - although esprima doesn't seem to be actively maintained anymore (last commit: Jun 11 this year). espree doesn't support it either according to issue 344 in the espree repo).

B.t.w. if you're using typescript dependency-cruiser already supports it - you can put target on ES3 in your tsconfig.json and pass it to depcruise with the --ts-config option.

[liyuanqiu]

Thank you, I'll give a try to the options you mentioned.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.