Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Plugin relies on chunk loading order #122

Open
DreierF opened this issue Feb 11, 2020 · 3 comments
Open

Plugin relies on chunk loading order #122

DreierF opened this issue Feb 11, 2020 · 3 comments

Comments

@DreierF
Copy link
Contributor

DreierF commented Feb 11, 2020

The plugin still uses the "Webpack 3" way of loading asynchronous chunks in AGGRESSIVE_BUNDLE mode via the window.webpackJsonp function. This works as long as the main (or runtime chunk if using runtimeChunk: 'single') is loaded as the first script. This is however not the default in most configurations e.g. when using the default behavior of the HtmlWebpackPlugin.

As the order is non-deterministic or at least my change without touching the configuration you run into Uncaught ReferenceError: webpackJsonp is not defined when one if the async chunks is processed first.

The closure webpack plugin should instead use a mechanism similar to what Webpack 4+ does (Link) to load async chunks. Here window.webpackJsonp is initialized as (window.webpackJsonp = window.webpackJsonp || []).push(/* ... */);, which makes it independent from the script loading order as the runtime can pick up already loaded scripts from the array.

As a workaround I had to manually specify the loading order in HtmlWebpackPlugin like so:

new HtmlWebpackPlugin({
	chunksSortMode: function(a, b) {
		const partialOrderedChunks = [
			'runtime',
			'main'
		];
		return partialOrderedChunks.indexOf(b.names[0]) - partialOrderedChunks.indexOf(a.names[0]);
	}
}),
@ChadKillingsworth
Copy link
Member

Can you get a minimal demo of this behavior built? Ideally adding another demo of this to the project. Then I can take a look.

DreierF added a commit to DreierF/closure-webpack-plugin that referenced this issue Feb 14, 2020
@DreierF
Copy link
Contributor Author

DreierF commented Feb 14, 2020

I have constructed a minimal example here:
DreierF@f0e92ab

It seems to happen as soon as an npm library is imported and the vendors chunk is created.

@ChadKillingsworth
Copy link
Member

ChadKillingsworth commented Feb 22, 2020

I can fix the loading order, but that alone won't get the results you are after.

Closure-compiler has an optimization called cross chunk code motion. It's purpose is to push individual objects, functions and variables as far down the chunk graph as possible to defer loading. Since in this case all of the symbols in the vendor chunk (which is a direct parent of the entry point) are only referenced in the entry point, they all get moved right down into the entry point. You get left with a vendor chunk that is basically empty.

I probably need to go add a flag to closure-compiler to allow that optimization to be disabled. But until that time, I can't think of an easy way to prevent this from happening.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants