Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

monaco minification #4

Open
hatemhosny opened this issue Dec 13, 2020 · 4 comments
Open

monaco minification #4

hatemhosny opened this issue Dec 13, 2020 · 4 comments

Comments

@hatemhosny
Copy link

I have noticed that monaco editor dynamically loads lots of files. some of these files are quite large (e.g. the uncompressed size of typescriptServices.js is 7.4 mb)

would you consider minifying all the files in monaco directory?

I have tried that with uglifyjs-folder using the command

uglifyjs-folder src/monaco -e -x .js -o src/monaco

caution: this does in-place minification of all the js files in the folder.

The resulting size was less than third and it kept working with no modification of code

would you consider something like that?

@lukejacksonn
Copy link
Owner

Oh wow! This seems like a very easy win so yes I would indeed be interested.. perhaps we could try get esbuild to do it as we already have that as a dependency on this project (also its super fast)?

@hatemhosny
Copy link
Author

I tried building monaco editor with esbuild, but building the workers didn't work.
I built them using parcel as shown here

these are the build commands:
https://github.com/hatemhosny/localpen/blob/develop/package.json#L23-L28

and these are the resulting pre-built minified files (which you may directly include, instead of the monaco folder):
https://github.com/hatemhosny/localpen/tree/develop/src/localpen/vendor/monaco-editor

@lukejacksonn
Copy link
Owner

Thanks for looking into this! Can you confirm at all how many bytes this saved?

@hatemhosny
Copy link
Author

roughly speaking, if we look to the src/monaco directory:
originally: 18,579,182 bytes (800 Files, 308 Folders) + codicon.ttf (56,484 bytes)
after bundling: 10,221,440 bytes (8 Files, 0 Folders) + codicon.ttf

This includes everything including html, css, json and typescript workers

if we look into typescript worker only src/monaco/language/typescript
originally: 9,137,289 bytes (9 Files, 1 Folders)
after bundling: 4,361,715 bytes (1 File)

so, in addition to the size reduction, you can also save lots of http requests for the large number of files required.

The nice thing is that you would only need to change the import statement to point to the new directory and everything should just work.

If you think this is a good idea, I can submit a PR for that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants