Skip to content

Reduce the size of the output bundle #12

@khalwat

Description

@khalwat

It's been discussed here: craftcms/cms#16809 that the space on disk used by Craft Code Editor is excessive.

Craft Code Editor implements Monaco, which is essentially a web version of the VS Code editor. As such, it's very full featured, and will likely always be larger than things like Code Mirror.

One of the reasons the build for Craft Code Editor is so large is that we don't know ahead of time which of the TypeScript, JSON, HTML, CSS workers you'll need, so we just build them all.

Still, they are loaded dynamically as web workers, so they don't get loaded unless you use them, as since they operate as asynchronous JavaScript as web workers, they are very efficient.

The other primary reason why the build is so large is:

  • It includes all of the .map files (useful for debugging)
  • It includes .gz versions of each built asset, in addition to the normal build, for web servers that have the proper accept-encoding headers.

If the .map and .gz files were removed from the build, it would be significantly smaller.

Here's the sizes of the build:

❯ du -hs ./* | sort -h | tail -r
 21M	./js
 16M	./ts.worker.js.map
5.7M	./ts.worker.js
3.3M	./ts.worker.js.map.gz
2.8M	./css.worker.js.map
2.0M	./html.worker.js.map
1.5M	./json.worker.js.map
1.2M	./ts.worker.js.gz
1.1M	./editor.worker.js.map
1.0M	./css.worker.js
680K	./html.worker.js
616K	./report-legacy.html
516K	./css.worker.js.map.gz
416K	./html.worker.js.map.gz
376K	./json.worker.js
340K	./json.worker.js.map.gz
252K	./editor.worker.js
236K	./editor.worker.js.map.gz
216K	./css.worker.js.gz
172K	./css
168K	./html.worker.js.gz
104K	./json.worker.js.gz
 80K	./fonts
 72K	./editor.worker.js.gz
4.0K	./manifest.json

In the ./js dir, it is once again mostly space from the .map files and additional .gz files:

❯ du -hs ./* | sort -h | tail -r
 14M	./vendors.js.map
3.7M	./vendors.js
2.9M	./vendors.js.map.gz
876K	./vendors.js.gz
 48K	./code-editor.js.map
 16K	./code-editor.js.map.gz
 16K	./code-editor.js
8.0K	./runtime.js.map
8.0K	./code-editor.js.gz
4.0K	./runtime.js

My thought is that this is "just disk space" and not that big of a deal, and worth it for the flexibility and features this approach offers. But I welcome ideas/PRs for streamlining things!

Also given that CKEditor, SEOmatic, Sprig, CP CSS, CP JS, Notifier, and other plugins already use Craft Code Editor, it'll likely already be there on disk anyway, so using another "slimmer" package may not actually be helping.

Would like to see efforts focus on making Craft Code Editor really good, so everyone uses it... because Monaco is a great and well-maintainer editor.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions