Worker() imports chunks further imports

[birtles]

Bug report

What is the current behavior?

When using webpack's native Worker loader, imports from within the worker are split into chunks.

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

1. git clone https://github.com/birtles/webpack-worker-test
2. yarn install
3. cd webpack-worker-test
4. npx webpack
5. ls -al dist
6. Observe that lodash (as required by worker.js) has been split into a separate chunk.

What is the expected behavior?

There should be a single worker bundle.

The background is I have a project where I produce exactly two files: the main thread JS, and the worker bundle.

Previously I was using GoogleChromeLabs/worker-plugin for this but it no longer works after upgrading to webpack 5 (#88).

I have tried to replace worker-plugin with webpack 5's native Worker() support but I cannot get it to produce a single worker bundle (despite successfully producing a single main thread bundle). I have tried all the options webpackEntrypoints, workerChunkLoading etc.

(I have tried to produce a minimal test case but I may not have accurately recreated the original problem in the process. The original file is something more like this one.)

Other relevant information:
webpack version: 5.1.3 (CLI: 4.0.0)
Node.js version: 12.14.0
Operating System: Windows 10 Pro (WSL)
Additional tools: (Although likely unrelated to this issue the project I am working on also uses TypeScript, html-webpack-plugin, copy-webpack-plugin, clean-webpack-plugin, mini-css-extract-css-plugin, purge-css)

[webpack-bot]

For maintainers only:

• webpack-4
• webpack-5
• bug
• critical-bug
• enhancement
• documentation
• performance
• dependencies
• question

[sokra]

There should be a single worker bundle.

Why do you need that?

Webpack is optimizing lodash into a shared chunk between main and worker so you don't have to download it twice.

The optimization.splitChunks option allows to control that.

[birtles]

There should be a single worker bundle.

Why do you need that?

The extra request is not necessary since there is no code shared between the two bundles.

Webpack is optimizing lodash into a shared chunk between main and worker so you don't have to download it twice.

It's not used by the main thread code (index.js in this case).

However, having looked into this, I think this issue may be invalid, assuming my understanding of the following is correct.

• I originally filed this because I observed that webpack doesn't split out chunks from the main thread bundle, only the worker bundle (in my app the main thread bundle includes many third-party dependencies but they still end up in the main bundle, only the worker code gets chunked). I believe this is because the default value for splitChunks.chunks defaults to async and the worker code is treated as async.

• I can disable this premature splitting with optimization.splitChunks.maxSize = 2 (defaults to 1).

Is that correct?

[code1x1]

yes except optimization.splitChunks.maxSize sets the maximum size in bytes treshold to split a chunk and has a default of 0 not 1.

@birtles i just checked out your test repo and saw that you already fixed it 👍

i think we may close the issue?

[birtles]

yes except optimization.splitChunks.maxSize sets the maximum size in bytes treshold to split a chunk and has a default of 0 not 1.

Yes, sorry, I meant minChunks!

@birtles i just checked out your test repo and saw that you already fixed it 👍

i think we may close the issue?

Yes, sorry for the noise!

[sokra]

Ah I see. So this is vendor splitting for better long term caching. You can disable it with optimization.splitChunks.cacheGroups.defaultVendors: false