solid-monaco
solid-monaco copied to clipboard
alxnddr
monaco-editor is unexpectedly fully bundled
Describe the bug
If I'm right, the loader.config causes the monaco-editor to be fully included in the bundle, although it is actually loaded through CDN.
https://github.com/alxnddr/solid-monaco/blob/41284a44c8e3bd874522c23b5d7dae5891bc38cd/src/MonacoEditor.tsx#L2 https://github.com/alxnddr/solid-monaco/blob/41284a44c8e3bd874522c23b5d7dae5891bc38cd/src/MonacoEditor.tsx#L51-L52
Building your playground:
> vite build dev
vite v5.4.2 building for production...
✓ 1049 modules transformed.
dist/index.html 0.51 kB │ gzip: 0.33 kB
dist/assets/codicon-DWH9l-dS.ttf 79.84 kB
dist/assets/index-BRwjHGeP.css 127.30 kB │ gzip: 20.73 kB
dist/assets/azcli-C2vBA31i.js 1.09 kB │ gzip: 0.46 kB
dist/assets/javascript-CQlqJguq.js 1.19 kB │ gzip: 0.62 kB
dist/assets/ini-yF59P7jx.js 1.35 kB │ gzip: 0.68 kB
dist/assets/csp-CqIl6iSx.js 1.67 kB │ gzip: 0.67 kB
dist/assets/pla-Cp8kinq6.js 1.93 kB │ gzip: 0.79 kB
dist/assets/scheme-gDjqwtwY.js 2.01 kB │ gzip: 0.97 kB
dist/assets/flow9-wLXmeo6b.js 2.06 kB │ gzip: 1.00 kB
dist/assets/sb-NROjXV9s.js 2.08 kB │ gzip: 0.97 kB
dist/assets/bat-BAKJxmMu.js 2.09 kB │ gzip: 1.01 kB
dist/assets/dockerfile-BgOGWaCf.js 2.12 kB │ gzip: 0.82 kB
dist/assets/pascaligo-Z17T2ccY.js 2.25 kB │ gzip: 1.06 kB
dist/assets/lua-FbLRz07w.js 2.37 kB │ gzip: 1.07 kB
dist/assets/cameligo-DzurU_SJ.js 2.43 kB │ gzip: 1.11 kB
dist/assets/graphql-uScX0mLr.js 2.51 kB │ gzip: 1.17 kB
dist/assets/objective-c-DBolmLrR.js 2.65 kB │ gzip: 1.20 kB
dist/assets/xml-ftV0_RfS.js 2.67 kB │ gzip: 1.11 kB
dist/assets/lexon-BMz0APkk.js 2.68 kB │ gzip: 1.07 kB
dist/assets/bicep-DKtM9ezo.js 2.78 kB │ gzip: 1.11 kB
dist/assets/sparql-5hUL7dXb.js 2.80 kB │ gzip: 1.31 kB
dist/assets/mips-D2BB_tA0.js 2.83 kB │ gzip: 1.22 kB
dist/assets/go-CQdGEiqo.js 2.90 kB │ gzip: 1.29 kB
dist/assets/sophia-LwATRHaW.js 3.01 kB │ gzip: 1.35 kB
dist/assets/m3-F3MR2vpL.js 3.06 kB │ gzip: 1.47 kB
dist/assets/qsharp-iGC6f2xL.js 3.18 kB │ gzip: 1.51 kB
dist/assets/fsharp-CEbfBfAU.js 3.23 kB │ gzip: 1.47 kB
dist/assets/pascal-C4E8LjYg.js 3.24 kB │ gzip: 1.55 kB
dist/assets/shell-CHwqnE9N.js 3.32 kB │ gzip: 1.35 kB
dist/assets/r-DgOh-GpK.js 3.38 kB │ gzip: 1.42 kB
dist/assets/java-B4nVP7zA.js 3.47 kB │ gzip: 1.55 kB
dist/assets/powershell-DUtNlkbn.js 3.52 kB │ gzip: 1.53 kB
dist/assets/cypher-C0NOBBnI.js 3.63 kB │ gzip: 1.58 kB
dist/assets/kotlin-C3T34NxZ.js 3.69 kB │ gzip: 1.63 kB
dist/assets/redis-CUjHknjG.js 3.80 kB │ gzip: 1.64 kB
dist/assets/tcl-CtpYBwaD.js 3.82 kB │ gzip: 1.52 kB
dist/assets/coffee-Bux12N06.js 3.84 kB │ gzip: 1.45 kB
dist/assets/hcl-CLUKkYLV.js 3.84 kB │ gzip: 1.64 kB
dist/assets/python-BRf3LLS9.js 3.88 kB │ gzip: 1.73 kB
dist/assets/markdown-BpaYHsZh.js 4.03 kB │ gzip: 1.54 kB
dist/assets/restructuredtext-DoYnpR8y.js 4.14 kB │ gzip: 1.52 kB
dist/assets/less-_0mhvbjD.js 4.14 kB │ gzip: 1.57 kB
dist/assets/apex-CmxtnpeZ.js 4.20 kB │ gzip: 1.91 kB
dist/assets/liquid-CUzCfHWg.js 4.22 kB │ gzip: 1.81 kB
dist/assets/yaml-CqszdDhj.js 4.27 kB │ gzip: 1.67 kB
dist/assets/rust-E66qEhVJ.js 4.41 kB │ gzip: 1.97 kB
dist/assets/dart-DRkxg4lA.js 4.50 kB │ gzip: 1.80 kB
dist/assets/css-CGpWsIrG.js 4.76 kB │ gzip: 1.53 kB
dist/assets/csharp-DKqJBhJO.js 4.77 kB │ gzip: 1.87 kB
dist/assets/pug-Cof0Wj-Z.js 5.07 kB │ gzip: 1.80 kB
dist/assets/mdx-DV8eEVOa.js 5.12 kB │ gzip: 1.59 kB
dist/assets/msdax-Dbqax-4H.js 5.16 kB │ gzip: 2.11 kB
dist/assets/html-DXJWGKtm.js 5.27 kB │ gzip: 1.54 kB
dist/assets/swift-C8fNz67c.js 5.42 kB │ gzip: 2.22 kB
dist/assets/cpp-DkOsvrPi.js 5.55 kB │ gzip: 2.24 kB
dist/assets/ecl-DnJ8rW3U.js 5.59 kB │ gzip: 2.38 kB
dist/assets/typescript-Bl8Ciosp.js 5.67 kB │ gzip: 2.32 kB
dist/assets/vb-DqkExfjG.js 6.04 kB │ gzip: 2.21 kB
dist/assets/twig-CbPmbPKL.js 6.22 kB │ gzip: 1.68 kB
dist/assets/scss-Nrac8q0b.js 6.66 kB │ gzip: 1.90 kB
dist/assets/handlebars--CRLfGo3.js 7.03 kB │ gzip: 1.76 kB
dist/assets/julia-BuzzKf8T.js 7.34 kB │ gzip: 2.81 kB
dist/assets/scala-DNKydVIG.js 7.56 kB │ gzip: 2.25 kB
dist/assets/wgsl-DBMWt06r.js 7.58 kB │ gzip: 2.89 kB
dist/assets/st-Cc39erT-.js 7.64 kB │ gzip: 2.39 kB
dist/assets/systemverilog-BFUzWeNg.js 7.85 kB │ gzip: 2.91 kB
dist/assets/postiats-Cc2rLWR_.js 8.10 kB │ gzip: 2.59 kB
dist/assets/php-DZgQod0H.js 8.27 kB │ gzip: 2.22 kB
dist/assets/perl-COEbQRNw.js 8.50 kB │ gzip: 3.29 kB
dist/assets/ruby-8Ngq79DM.js 8.75 kB │ gzip: 2.73 kB
dist/assets/razor-CGIZfhj0.js 9.03 kB │ gzip: 2.44 kB
dist/assets/protobuf-YVfST0Lp.js 9.29 kB │ gzip: 2.23 kB
dist/assets/clojure-COTUvZem.js 9.89 kB │ gzip: 3.77 kB
dist/assets/elixir-B7YTO__p.js 10.50 kB │ gzip: 2.69 kB
dist/assets/sql-CVxjL13O.js 10.54 kB │ gzip: 4.01 kB
dist/assets/mysql-BlazkCxF.js 11.52 kB │ gzip: 4.22 kB
dist/assets/redshift-DpiWUl_b.js 12.05 kB │ gzip: 4.49 kB
dist/assets/pgsql-Dy_Aa0h1.js 13.71 kB │ gzip: 4.65 kB
dist/assets/abap-D_AlL1At.js 14.41 kB │ gzip: 5.46 kB
dist/assets/freemarker2-BOxvahyy.js 16.35 kB │ gzip: 4.30 kB
dist/assets/powerquery-0Oii_npw.js 17.19 kB │ gzip: 5.01 kB
dist/assets/solidity-DzvweBVM.js 18.84 kB │ gzip: 4.62 kB
dist/assets/tsMode-D8yTul__.js 22.75 kB │ gzip: 6.46 kB
dist/assets/cssMode-CZ8hwGy7.js 33.59 kB │ gzip: 8.91 kB
dist/assets/htmlMode-Cze7VjjC.js 34.14 kB │ gzip: 9.04 kB
dist/assets/jsonMode-B5femgYZ.js 39.66 kB │ gzip: 11.13 kB
dist/assets/index-zPEVBprz.js 3,295.72 kB │ gzip: 852.29 kB
Compared with monaco-react, it does not init with monaco, and imports types only.
https://github.com/suren-atoyan/monaco-react/blob/1e3c3efc29ae3b6d07af7545a9a3da6fa9142ba4/src/Editor/Editor.tsx#L55-L66
import { type IDisposable, type editor } from 'monaco-editor';
useMount(() => {
const cancelable = loader.init();
cancelable
.then((monaco) => (monacoRef.current = monaco) && setIsMonacoMounting(false))
.catch(
(error) =>
error?.type !== 'cancelation' && console.error('Monaco initialization: error:', error),
);
return () => (editorRef.current ? disposeEditor() : cancelable.cancel());
});
Minimal Reproduction Link
your playground
