microsoft / microsoft/monaco-editor

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

Open
#3,142 7 comments 0 reactions 1 assignee View on GitHub

@hediet is already working on this.

Since Jul 21, 2022.

feature-request integration webpack-plugin
Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

Reproducible in vscode.dev or in VS Code Desktop?
  • Not reproducible in vscode.dev or VS Code Desktop
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.

image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.