lukejacksonn / monacode

An es-module wrapper around the monaco editor and prettier
https://monacode.live
MIT License
168 stars 11 forks source link

Potential further size reduction #1

Open okwolf opened 3 years ago

okwolf commented 3 years ago

It looks like one of the goals of this project is to reduce the bloat needed for a web-based code editor. I ran a quick coverage profile and found that about half of the bundle is not used during load or basic edit operations. I'm not sure how much of this truly dead code and how much was skipped because some features were not executed.

Are you interested in looking into this any further?

image

lukejacksonn commented 3 years ago

Hey man 👋 long time to see! I am indeed interested it seeing how much smaller it could be made without getting rid of "core" functionality. The hard part here is deciding how far to deviate from moaco-editor itself (once you go so far you really are entering hard fork territory) and also, what in fact are core features.

I know @kitten had a stab at removing some unused stuff https://twitter.com/_philpl/status/1332814095326842880 but didn't end up with anything conclusive.

What would be interesting is to see how small we could get with:

Which leaves dropping things like the diff view, tree view, and some of the non-js oriented language support files. Alternatively we could look at being able to dynamically import all of these modules based off of comne config object, imagine something like:

monacode({
  treeView: true,
  diffView: false,
  ...
})

What are your thoughts on either of these approaches?

okwolf commented 3 years ago

Dynamic import would be magnifique and super modular, but would it result in extra setup overhead or a build step in order to use?

My intention was to try and remove code that would never be used given the features that are exposed. This could be quite difficult to determine.

lukejacksonn commented 3 years ago

Gotcha. So for either of these tasks you are going to want to check out the files in here: https://github.com/lukejacksonn/monacode/tree/master/src/monaco/editor

Perhaps more specifically this one https://github.com/lukejacksonn/monacode/blob/9fa32db5571d2f3c20802cb87444a2e6e63d1be5/src/monaco/editor/editor.all.js

In there is where all the "features" get imported and AFAICT simply commenting out imports prevents the features from being imported and thus reduces the overall bundle size. That said, a lot of these features aren't actually that big!

I think the bulk of the size here comes from the language support files but this is really just a guess.

Nevertheless if you fancy digging into this at some point then I'd be very curious to see what you find!

kitten commented 3 years ago

@lukejacksonn The largest parts are LSPs for each language, specifically the TS one. The Prettier patch that's in there is also not quite hooked up properly, I believe, and adds the entirety of a Prettier bundle with all its parsers too, so that adds most of the size today. Even removing all LSPs and a lot of features I believe last I got it down to 500kB, but more after that seems rather hard.

lukejacksonn commented 3 years ago

Getting down to 500kb would make for a pretty good saving! It would be interesting to see if we can get formatting working with all the built in LSPs and eschew prettier all together, however looking at #3 suggests that the prettier import doesn't bring in all the parsers.