Monaco-editor: Make smaller webpack bundles

[chengtie]

I have followed this page to integrate the esm version by using plain webpack.

The file generated, app.bundle.js, has 2.1Mb. What I need is the editor for .js, .json, .css and .html.

Does anyone know if it is possible to make smaller bundles that can be loaded faster?

[myfoxtail]

@chengtie I would suggest you to use the lazy load approach with webpack.

For example this will load a monaco bundle separately.

import(/* webpackChunkName: "monaco-editor" */ 'monaco-editor').then(() => {
      // your code here
});

As you can also notice while building the project that webpack generates a lot of 1.js, 2.js, etc files (which contain language set ups [js, css, python, etc]). They are also being loaded asynchronously inside monaco.

[flash-me]

You can also skip unnecessary features from the build. You can find an example here.