Dynamically imported chunk is included in the bootstrap page if webpackChunkName is defined

[Legioth]

Vaadin 14.0.4

Steps to reproduce: 1) Get an empty servlet-only starter 2) Add an empty /frontend/dynamic.js file 3) Add /frontend/loader.js containing the oneliner window.loadDynamic = () => import("./dynamic.js"); 4) Start the server, load / in the browser and observe in the browser's network tab that nothing related to dynamic.js is downloaded 5) Run window.loadDynamic(); in the JS console and observe that there is a network request for a file named vaadin-1-<hash>.js. 6) Modify the import statement in loader.js to define a chunk name: import(/* webpackChunkName: "dynamic" */"./dynamic.js"); 7) Reload the page and observe that a file named vaadin-dynamic-<hash>.js was loaded immediately 8) Run window.loadDynamic(); again in the JS console and note that no additional network request happens because the module has already been loaded.

The expected outcome is that adding webpackChunkName will not cause the chunk to be loaded eagerly.

It seems like this happens because the logic that looks in stats.json to find the name of the main bundle can also pick up other chunks depending on their name.

[caalador]

Bootstrap adds anything that get into assetsByChunkName to the bootstrap response

JsonObject chunks = Json.parse(content)
                    .getObject("assetsByChunkName");

            for (String key : chunks.keys()) {
                Element script = createJavaScriptElement(
                        "./" + VAADIN_MAPPING + chunks.getString(key));
                if (key.endsWith(".es5")) {
                    head.appendChild(script.attr("nomodule", true));
                } else {
                    head.appendChild(script.attr("type", "module"));
                }
            }

[Legioth]

Ok, apparently unnamed chunks that get numerical ids won't be included in assetsByChunkName then. Would it make sense to somehow know which entries from assetsByChunkName to actually include?

[caalador]

I guess we would need to somehow know what to add to bootstrap. At the time this was convenient as we generate the bundle with a hash and with this we get the correct bundle really easy with the correct hash for the run.

[Legioth]

Should maybe instead look at the entryPoints structure in stats.json? At least in my simple example application, that one contains bundle and bundle.es5 but it doesn't have any traces of the dynamic bundle.