Reducing size of monaco-editor dependency

[Flux159]

Hi, I was doing a check of my node_modules folder in a medium sized project and I'm using monaco-editor as a dependency. Monaco-editor ended up being the largest dependency by size in my node_modules folder at 29MB.

I used the following command on Mac OS X to check this:

du -sm node_modules/* | sort -rn | head -n 20

I wanted to see why monaco-editor was taking up so much space so I checked the folder itself:

> du -sm node_modules/monaco-editor/*
1	node_modules/monaco-editor/CHANGELOG.md
1	node_modules/monaco-editor/LICENSE
1	node_modules/monaco-editor/README.md
1	node_modules/monaco-editor/ThirdPartyNotices.txt
16	node_modules/monaco-editor/dev
6	node_modules/monaco-editor/min
7	node_modules/monaco-editor/min-maps
1	node_modules/monaco-editor/monaco.d.ts
1	node_modules/monaco-editor/package.json

Those sizes are in MB. I noticed that monaco-editor ends up packaging "dev", "min" and "min-maps" in its package.

Since the npm monaco-editor package seems to be built by using a subset of the vscode repository, I was wondering if it was also possible to produce a reduced subset of the monaco-editor repository for people who don't need the "dev" and "min-maps" directories. Perhaps as "monaco-editor-min" or a separate package since npm doesn't support it under the same name. This would significantly reduce the size of package needed for a number of users seeing as how monaco-editor is downloaded over ten thousand times a month according to npm stats (https://www.npmjs.com/package/monaco-editor).

[rajibhasan11]

Today I have installed and found it is 81.3 MB (85,336,064 bytes) of the entire "monaco-editor" in the production build, which is huge. Would appreciate any suggestions to reduce the size of it.

I am using:

"monaco-editor": "^0.26.1",
"ngx-monaco-editor": "^12.0.0",

[tjb1019]

Today I have installed and found it is 81.3 MB (85,336,064 bytes) of the entire "monaco-editor" in the production build, which is huge. Would appreciate any suggestions to reduce the size of it.

I am using:

"monaco-editor": "^0.26.1",
"ngx-monaco-editor": "^12.0.0",

Update your glob input and output in angular.json to only copy the min version to /assets.

{ "glob": "**/*", "input": "node_modules/monaco-editor/min", "output": "assets/monaco-editor/min" }

[rajibhasan11]

Thanks @tjb1019

The problem remains if we copy only /monaco-editor/min, it seems there are dependencies on /monaco-editor/min-map too

I found below error in the console (build made with your setup) { "glob": "**/*", "input": "node_modules/monaco-editor/min", "output": "assets/monaco-editor/min" } DevTools failed to load source map: Could not parse content for ~/assets/monaco-editor/min-maps/vs/loader.js.map: Unexpected token < in JSON at position 0

[esteban-gs]

Today I have installed and found it is 81.3 MB (85,336,064 bytes) of the entire "monaco-editor" in the production build, which is huge. Would appreciate any suggestions to reduce the size of it. I am using:

"monaco-editor": "^0.26.1",
"ngx-monaco-editor": "^12.0.0",

Update your glob input and output in angular.json to only copy the min version to /assets.

{ "glob": "**/*", "input": "node_modules/monaco-editor/min", "output": "assets/monaco-editor/min" }

Thanks! this took the production size from 36MB to 12MB, that still seems very high. Is this normal?

[dinager]

Update your glob input and output in angular.json to only copy the min version to /assets. { "glob": "**/*", "input": "node_modules/monaco-editor/min", "output": "assets/monaco-editor/min" }

how can I do that on ember.js? what is the corresponding file for angular.json?

[vishalsatam]

Why is the minified editor.main.js file 2.9 MB in my node_modules folder but its just 731 kb when accessing from jsdelivr path https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.js ?

Is there a way to reduce the size of the minified files in nod_modules folder down to 731 kb similar to the jsdelivr CDN?

[Flux159]

@vishalsatam jsdelivr is compressing the file sent over the wire with gzip. What you're reading from the chrome network tab is the gzip'd file size, when chrome decompresses editor.main.js, it's still 2.9MB in size (you can see this if when you open the network tab for https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.js as "734KB transferred | 2.9MB resources").

Compressing the files in node_modules locally will not work because node build tools won't work with compressed files in development.

[jogibear9988]

you can look in issue: #5067

I've created a ESM build, minified 4mb, brotly compressed 820kb