Any import from 'monaco-editor' adds ALL to JS bundle

[montella1507]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Code

No response

Reproduction Steps

Installed version:
"monaco-editor": "^0.21.3",

Any import from 'monaco-editor' leads to add everything to generated JS bundle, even in prod build.

• create any typescript / webpack / angular application with working TreeShaking / Codesplitting etc.
• import anything in Typescript from 'monaco-editor' namespace

like:

import {
  languages
}                                                                                                          from 'monaco-editor';

or:

import {
  Range
}                                                                                                          from 'monaco-editor';

or:
import * as monaco from 'monaco-editor';

• it doesnt matter
  And entire monaco editor will be added to final PRODUCTION bundle

Actual (Problematic) Behavior

If i import ANYTHING from 'monaco-editor' namespace in typescript, it will add entire 4MB chunk of JS to production bundle.

There is not any way how to use - for the instance, only Interfaces (types) or enums from 'monaco-editor' namespace in typescript without adding the entire editor to final bundle.

It is not treeshakeabl

Expected Behavior

If i import only Interface from 'monaco-editor' namespace in typescript, it should add 0B of javascript.

Additional Context

No response

[hediet]

If i import only Interface from 'monaco-editor' namespace in typescript, it should add 0B of javascript.

You can use import type { ... } from ....

[montella1507]

@hediet
HI

1. it is available only for types, so you cannot import only 1 function / class, eg. Range
2. only 1/20 of interfaces are importable this way, others are hidden inside other classes
3. some of important things are as Static fields of class only... (eg. keyboard shortcuts)

[montella1507]

Examples:

• monaco.languages.CompletionItemKind.Snippet
• monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet

You cannot just
import { CompletionItemInsertTextRule } from 'monaco-editor';

and importing
import { languages } from .., will add entire bundle.

i haven't found any other way how to import / use these things without bundling 4Mb to main bundle..

(import { CompletionItemInsertTextRule } from 'monaco-editor/esm/vs/language/typescript/lib';,...)

[knoxell]

You can import only types and get the ones you mentioned like this:

// you can do this (you could still call it monaco I just renamed it to differentiate):
import type * as monacobase from 'monaco-editor'
// or import the declaration file directly:
import type monaco from 'monaco-editor/esm/vs/editor/editor.api'

type x = monaco.languages.CompletionItemKind.Snippet
type y = monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
type xbase = monacobase.languages.CompletionItemKind.Snippet
type ybase = monacobase.languages.CompletionItemInsertTextRule.InsertAsSnippet

Ctrl + Click on the import path in VS Code shows you that both import monaco-editor/esm/vs/editor/editor.api.d.ts

Hope this helps :-)

[montella1507]

Will try, thank you ;)

[montella1507]

what about importing "utility classes" like Range? It will still pack entire monaco :-/

[knoxell]

You can generally shrink down you bundle size by not importing * as x from 'xyz' or { x } from 'xyz' but importing to code from the file it's implemented in, therefore the maximum of what lands in your bundle is the file and its imports.

---

Let's look at how you can find that file. If you don't use vscode you can always just do this in the node_modules/monaco-editor/ folder and go to the corresponding files and at them.

Here you can do this in vscode by:

1. importing Range like you already did

import Range from 'monaco-editor'

2. now press Crtl + click on the lilbary you import it from
3. you landed in node_modules/monaco-editor/esm/vs/editor/editor.api.d.ts this file only declares types, sad. Now you gotta find were the actual implementation of the code is. It's probably in the same folder or at least in a file called `editor.api.[js|ts|jsx|tsx]. Look for it.
4. If you found it, where is 'Range' defined?

.
.
.
import { YYYYYYYY } from './path/to//file.js';
.
.
.
const XXXXXXX = YYYYYYYY();
.
.
.
export const Range = XXXXXXX.Range;

5. So we gotta look at YYYYYYYY. Let's go to ./path/to/file.js you can do it like before by Ctrl + click on the path

.
.
.
import { Range } from '../path/to/file_where_range_is_implemented.js';

6. Great you found it! Now you can import Range directly from that file!

import { Range } from 'monaco-editor/something/somethingelse/path/to/file_where_range_is_implemented.js';

---

You are probably developing something that is gonna interact with monaco editor maybe you can also get Range from that import without importing any code from monaco-editor at all?

[harrised94]

@montella1507 - did you ever manage to get this suggested workaround working? I have attempted but full package is still being bundled.

[montella1507]

Well.. maybe that is the way how to do that, but it is non-standard way - developer should not be forced to do "deep importing" or to do "research". how to import every thing he needs...

it should be exported correctly and it should by ESM module, it should avoid reexports, have sideEffects: false set during ESM build etc to be modern, treeshakeable and code-splittable library.

If i import

import { map, filter } from 'rxjs';

etc, it will NOT bundle entire RXJS to the application and i dont have to import it like
import { map } from 'rxjs/internals/operators/map';
or something...

So... If we are talking about possible workarounds, there may be a "solution" and i can "deeply import" and it may (have to try first) solve the issue,.. but it is still workaround, right?

There should be a way how to import it like this:

import { Range } from 'monaco';

and in that case - only Range class should be bundled to final chunk, or... to make it better for code splitting - there should be more entry points:

import { Range } from 'monaco/core';
import { Editor } from 'monaco/editor';

I am just asking for modern solution, which have other libraries in common.

[clarkmcc]

I'm also seeing this issue. Bundle sizes are huge.

[montella1507]

Nope, we have gone the way to lazy load components using Monaco....

I have already lost all of hope it will be done correctly from Monaco side....