[Bug] monaco-editor-webpack-plugin does not split/reuse chunks properly

[artola]

Reproducible in vscode.dev or in VS Code Desktop?

• [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [X] Not reproducible in the monaco editor playground

Monaco Editor Playground Code

No response

Actual Behavior

Custom Languages do not share code with other chunks. For example, "mylanguage" use prettier and it is also used in other parts of the app, but when it is compiled the chunk created by the plugin contains a copy in place of use a common chunk.

Other workers in the app, created as new Worker(new URL('./worker.js', import.meta.url)); are able to consume the common chunk. As explained in webpack docs.

But the worker created by AddWorkerEntryPointPlugin does not the same.

    new MonacoWebpackPlugin({
      languages: ["json"],
      customLanguages: [
        {
          label: "mylanguage",
          entry: [
            "vs/basic-languages/mylanguage/mylanguage.contribution",
            path.resolve("src/mylanguage/mylanguage.contribution.ts"),
          ],
          worker: {
            id: "vs/language/mylanguage/mylanguageWorker",
            entry: path.resolve("src/mylanguage/mylanguage.worker.ts"),
          },
        },
      ],
    })

Expected Behavior

Custom languages should profit chunking to reduce the bundle size.

Additional Context

In this example, it is used language "json" and a custom language "xxx". Both of them are not sharing any code with the "editor.worker" when there is a lot of duplication. Also, the language "xxx" has its own "shared", even if the also created by the "main" chunk.

It seems that this plugin fails to reduce the bundle size because creates multiple entries. I could understand the complexity of dealing with the "main" entry and it makes sense to avoid it, but all the "languages" and the "editor" should be compiled in 1 entry, the same for all of them.

[artola]

@sokra Do you have some hint? It will be so much appreciated.

[artola]

@alexander-akait Do you know how to fix this plugin to share the chunks? What is missing?

https://github.com/microsoft/monaco-editor/blob/a5298e13bba5ab5d97ccef97c7b56df9cec489ce/webpack-plugin/src/plugins/AddWorkerEntryPointPlugin.ts#L40

[artola]

Follow up discussion: https://github.com/webpack/webpack/discussions/15963

[hediet]

Looks like vankops answer says this is by design:

so web entrypoints and webworker entrypoints will have duplicate code since they used for different targets...

I understand this sucks.

[artola]

@hediet We bundle other webworkers without problem using the webpack v5 support new Worker(new URL('./worker.js', import.meta.url));. Then even if code has different targets (web and webworker) it works. It is all about Monaco plugin to upgrade to this webpack API.

[hediet]

It is all about Monaco plugin to upgrade to this webpack API.

What do you suggest? We don't want a webpack lock-in though.

[artola]

It is all about Monaco plugin to upgrade to this webpack API.

What do you suggest? We don't want a webpack lock-in though.

As far as I know, also other bundler go in the same direction because it means using " standard" api (no vendor specific), the only requirement is that the url string must be static (no concats, etc).

ALL same direction:

• webpack: https://webpack.js.org/guides/web-workers/#root
• parcel: https://parceljs.org/languages/javascript/#workers
• snowpack: https://www.snowpack.dev/guides/web-worker/
• vite: https://vitejs.dev/guide/features.html#web-workers