Incorrect dependencies between async chunks

[arackaf]

Do you want to request a feature or report a bug?

BUG

What is the current behavior?

loading async chunk X causes async chunks Y and Z to also get loaded, incorrectly. I say incorrectly because there is nothing in Y or Z which X needs to use.

If the current behavior is a bug, please provide the steps to reproduce.

I have a repo all set, ready to go

https://github.com/arackaf/booklist/tree/special/webpack-debug-final

note the branch - webpack-debug-final!!!!!

Clone and switch to that branch, go to the react-redux folder and npm install.

Also from the react-redux folder, run webpack.

Run react-redux/default.htm with your favorite editor - ie Visual Studio. My app.js node app won't work, sadly (without a lot more work). Note - you may get some 404's for css files missing, just ignore - they're css files built with purify as part of my build process, and shouldn't affect reproducing this bug.

If you use VS, the "Open Website" option should work fine - just open the react-redux folder as if it were its own website (which it basically is) and run default.htm.

What is the expected behavior?

After a 2 second delay, you should see the async chunk containing import('./modules/home/home') get loaded in the network tab, along with the XXXXX chunk, which has applicationRoot/components/bootstrapButton';

home has a static import to './homeComponent'.

homeComponent has import 'applicationRoot/components/bootstrapButton';

the XXXXX chunk has nothing more than 'applicationRoot/components/bootstrapButton' so the async chunk with home should pull in XXXXX and be done.

Instead the used-twice-chunk and the book-modal-helpers-chunk are also pulled down.

If this is a feature request, what is motivation or use case for changing the behavior?

N/A

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

webpack 2.3.2.
Node 4.4.5

[sokra]

The repo is too complex. Could you strip it down to a simple and minimal repo?

[arackaf]

I'll try to hack away some things and find a lower level of where it breaks.

[arackaf]

@sokra ok, I chopped some things away as best I could. The problem remains

after 2 seconds

• home is async loaded.
• stuff home does NOT need are also async loaded, as described above.

[arackaf]

Thanks @sokra and @TheLarkInn for discussing this with me. After looking closer at my minimal repro I found that by removing all that other stuff, I'd changed the bundles radically, such that the behavior I was seeing was now (probably) correct.

Looking back at my real code, the behavior does still appear wrong, but it's hard to know for sure.

What would be really, really useful would be a better debugging story for these chunks. Ideally, it would be useful to see a list of all my chunk files, each showing the modules they contain, and the "reasons" why that chunk would be loaded. ie import X from './x' in file path/to/thing.js

I know Sean told me about the --display-reasons, which I tried, but it wasn't terribly clear how to leverage that massive amount of data to find exactly what I needed.

Just a suggestion - not sure if it's been made before. If you'd like that in a separate issue, let me know and I'd be happy to.

[arackaf]

Actually, scratch that. --display-reasons appears to show too little info. It appears to show why individual modules are imported, not what each async chunk contains, and the reasons why IT (the async chunk) would be loaded in the application.