Async imports' child imports do not end up in async imports chunk

Do you want to request a feature or report a bug? Think this might be a bug.

What is the current behavior?

I asked about this on Stack Overflow, but got no answers, so as a last effort I’m trying my luck here.

I have a fairly large app, where I always know where the user is going to start out (“homepage”). I use async imports for everything except this homepage, and this works by providing me with to chunks: one “main” and one “async”. Problem is, the “main” chunk includes all child imports of the dynamically imported modules as well, making it needlessly large by including all the stuff only dynamically imported modules use.

A dynamically loaded component (a route basically) imports all its dependencies with normal ES6 import. Some of these imports come from a separate, private NPM module.

This is part of my Webpack config:

        entry: {
            "app": "./src/app.js"
        },
        output: {
            path: path.resolve(__dirname, "public"),
            filename: "js/[name].bundle." + appPackage.version + ".js",
            chunkFilename: "js/[name].bundle." + appPackage.version + ".js",
            publicPath: "/",
        },

and imported like this (in routes):

 import( /* webpackChunkName: "async" */ "module-name-goes-here")

How can I force Webpack to bundle all dynamic resources’ child imports into the same “async” chunk? Or am I missing something here? Is this not possible? Does this kind of chunking require me to also use dynamic imports for all children? That would be impractical in practice.

If the current behavior is a bug, please provide the steps to reproduce. If a minimal reproduceable repo is required, let me know and I’ll cook something up. I thought I’d check here first, before spending any more time on this.

What is the expected behavior? All child imports of a dynamically imported file ends up in async chunk, if it is not used anywhere else.

If this is a feature request, what is motivation or use case for changing the behavior? Having everything in main chunk makes it needlessly large, and kinda forfeits the whole point of chunking in the first place.

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System. Nodejs: 8.9.3, Webpack: 3.10.0, Mac OS 10.13.1

[afenton90]

I’m also seeing this behaviour with a very similar setup to the one @tommhuth is describing. Example:

I have the main entry point:

import A from './components/A'

render(A);

Component A roughly looks like this

const B = import('B');

const A = () => <B />;

export default A;

And component B is consuming component C like this

import C from './components/C';

const B = () => <C />;

export default B;

I would expect webpack to output the main entry point & A in the main bundle. Then components B & C in the split async bundle/chunk.

However, everything is just bundled up in the main bundle with very little code in the split bundle other than some webpack scaffolding.

Could this issue be tagged as a bug? Its either a gap in the documentation or a genuine bug in webpack.

Using webpack: v3.10.0 node: v6.11.3

[AbhilashSrivastava]

Its pretty understandable, the example given by @afenton90 here but i guess no one has a solution. Its a major problem i am facing. 😦