microsoft / microsoft/monaco-editor

Reducing size of monaco-editor dependency

Open
#463 8 comments 21 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

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).

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.

Research direction

Start by tracing how the npm monaco-editor package is assembled and how the dev, min, and min-maps directories are included. Determine whether a reduced package can omit dev and min-maps while remaining usable, then verify that the published package contains only the intended files and still works for consumers.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
build-system, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.