最近使用monaco-editor打包体积很大，就通过按需加载功能模块来实现打包体积的优化，写个笔记记录一下。
优化思路
import * as monaco from 'monaco-editor';
// or import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
// if shipping only a subset of the features & languages is desired
monaco.editor.create(document.getElementById('container'), {
value: 'console.log("Hello, world")',
language: 'javascript'
});
就是使用import * as monaco from 'monaco-editor/esm/vs/editor/editor.api引入monaco-eitor，这个就是最基础的版本，没有语言高亮、代码提示、折叠、右键等。
如果需要代码高亮、折叠等功能，我们就在这个基础版本上引入对应的功能即可。
示例
这是一个简单的javascript编辑器，有语法高亮、代码提示、折叠和代码格式化的功能。
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
import "monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution"; // 代码高亮&提示
import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution"; // 代码高亮&提示
import "monaco-editor/esm/vs/language/typescript/monaco.contribution"; // 代码高亮&提示
import 'monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu.js'; // 右键显示菜单
import 'monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js'; // 折叠
import 'monaco-editor/esm/vs/editor/contrib/format/browser/formatActions.js'; // 格式化代码
import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js'; // 代码联想提示
import 'monaco-editor/esm/vs/editor/contrib/tokenization/browser/tokenization.js'; // 代码联想提示
self.MonacoEnvironment = {
getWorker: function (workerId, label) {
switch (label) {
case 'typescript':
case 'javascript':
return new tsWorker();
default:
return new editorWorker();
}
}
};
效果
优化前
vite v2.9.12 building for production...
✓ 92 modules transformed.
✓ 94 modules transformed.
✓ 140 modules transformed.
✓ 875 modules transformed.
dist/static/css/codicon-71cccbf1.ttf 70.80 KiB
dist/assets/editor.worker.a0146d7d.js 171.11 KiB
dist/assets/ts.worker.8f4f13c7.js 4783.24 KiB
dist/index.html 0.43 KiB
dist/static/js/apex-9c789700.js 4.10 KiB / gzip: 1.86 KiB
dist/static/js/azcli-bd012a0d.js 1.07 KiB / gzip: 0.45 KiB
dist/static/js/abap-6a4bf9d6.js 14.07 KiB / gzip: 5.35 KiB
dist/static/js/bat-b1fe6d7e.js 2.04 KiB / gzip: 0.98 KiB
dist/static/js/bicep-bbe1b6ba.js 2.72 KiB / gzip: 1.08 KiB
dist/static/js/cameligo-177f1489.js 2.37 KiB / gzip: 1.07 KiB
dist/static/js/coffee-86d4a932.js 3.75 KiB / gzip: 1.42 KiB
dist/static/js/cpp-d86cb30d.js 5.56 KiB / gzip: 2.20 KiB
dist/static/js/clojure-2515574a.js 9.66 KiB / gzip: 3.65 KiB
dist/static/js/csp-c6eae903.js 1.63 KiB / gzip: 0.65 KiB
dist/static/js/csharp-54422859.js 4.66 KiB / gzip: 1.82 KiB
dist/static/js/css-8c53ab1c.js 4.64 KiB / gzip: 1.49 KiB
dist/static/js/cypher-36832a3b.js 3.55 KiB / gzip: 1.53 KiB
dist/static/js/dockerfile-35b9e10f.js 2.07 KiB / gzip: 0.79 KiB
dist/static/js/flow9-b296caf9.js 2.01 KiB / gzip: 0.96 KiB
dist/static/js/dart-5254d8ca.js 4.39 KiB / gzip: 1.74 KiB
dist/static/js/ecl-36eb7644.js 5.46 KiB / gzip: 2.33 KiB
dist/static/js/fsharp-3ebde1fc.js 3.15 KiB / gzip: 1.42 KiB
dist/static/js/go-091c5c74.js 2.83 KiB / gzip: 1.25 KiB
dist/static/js/elixir-a61d4a28.js 9.77 KiB / gzip: 2.55 KiB
dist/static/js/graphql-6a07f0a6.js 2.45 KiB / gzip: 1.13 KiB
dist/static/js/freemarker2-d47c37c6.js 16.05 KiB / gzip: 4.20 KiB
dist/static/js/handlebars-fe4dd919.js 6.95 KiB / gzip: 1.74 KiB
dist/static/js/hcl-d1f42738.js 3.75 KiB / gzip: 1.59 KiB
dist/static/js/html-01d6b905.js 5.23 KiB / gzip: 1.53 KiB
dist/static/js/javascript-63dc6030.js 1.21 KiB / gzip: 0.63 KiB
dist/static/js/ini-cd9a24ed.js 1.32 KiB / gzip: 0.66 KiB
dist/static/js/java-24bf770d.js 3.39 KiB / gzip: 1.50 KiB
dist/static/js/kotlin-33a63639.js 3.60 KiB / gzip: 1.57 KiB
dist/static/js/typescript-e510ad13.js 5.60 KiB / gzip: 2.27 KiB
dist/static/js/lexon-bc6c82b7.js 2.62 KiB / gzip: 1.04 KiB
dist/static/js/less-b3428552.js 4.05 KiB / gzip: 1.52 KiB
dist/static/js/julia-c6b7edf4.js 7.29 KiB / gzip: 2.69 KiB
dist/static/js/lua-10de6019.js 2.31 KiB / gzip: 1.04 KiB
dist/static/js/m3-541e2c4e.js 2.99 KiB / gzip: 1.41 KiB
dist/static/js/markdown-dbc1189e.js 3.94 KiB / gzip: 1.49 KiB
dist/static/js/liquid-5ca55e5a.js 4.20 KiB / gzip: 1.78 KiB
dist/static/js/mips-b0359785.js 2.76 KiB / gzip: 1.19 KiB
dist/static/js/objective-c-59d1a983.js 2.59 KiB / gzip: 1.17 KiB
dist/static/js/msdax-8626084f.js 5.04 KiB / gzip: 2.05 KiB
dist/static/js/pascaligo-858da816.js 2.19 KiB / gzip: 1.03 KiB
dist/static/js/pascal-8f0bf5a6.js 3.17 KiB / gzip: 1.50 KiB
dist/static/js/mysql-61258bc9.js 11.23 KiB / gzip: 4.09 KiB
dist/static/js/pla-ce7ce98a.js 1.88 KiB / gzip: 0.77 KiB
dist/static/js/perl-7c5420ea.js 8.30 KiB / gzip: 3.16 KiB
dist/static/js/php-76967d70.js 8.08 KiB / gzip: 2.15 KiB
dist/static/js/postiats-e25d8fee.js 7.91 KiB / gzip: 2.50 KiB
dist/static/js/powershell-37fd0fcf.js 3.43 KiB / gzip: 1.47 KiB
dist/static/js/python-2aa88607.js 3.87 KiB / gzip: 1.73 KiB
dist/static/js/protobuf-a16e6b52.js 9.07 KiB / gzip: 2.15 KiB
dist/static/js/pgsql-cb9ca237.js 13.33 KiB / gzip: 4.51 KiB
dist/static/js/pug-f1d20abb.js 4.96 KiB / gzip: 1.74 KiB
dist/static/js/r-9758a160.js 3.30 KiB / gzip: 1.39 KiB
dist/static/js/qsharp-5fd4b01d.js 3.11 KiB / gzip: 1.46 KiB
dist/static/js/powerquery-875a007e.js 16.78 KiB / gzip: 4.89 KiB
dist/static/js/redis-51c379a5.js 3.71 KiB / gzip: 1.58 KiB
dist/static/js/razor-a722df70.js 8.91 KiB / gzip: 2.40 KiB
dist/static/js/restructuredtext-c7ba3444.js 4.04 KiB / gzip: 1.47 KiB
dist/static/js/rust-f7a10365.js 4.30 KiB / gzip: 1.91 KiB
dist/static/js/sb-ad12ccee.js 2.03 KiB / gzip: 0.95 KiB
dist/static/js/ruby-af55dd67.js 8.54 KiB / gzip: 2.64 KiB
dist/static/js/redshift-49a0a6c6.js 11.76 KiB / gzip: 4.36 KiB
dist/static/js/scheme-932f6028.js 1.97 KiB / gzip: 0.93 KiB
dist/static/js/scala-997545d7.js 7.39 KiB / gzip: 2.17 KiB
dist/static/js/shell-2951783f.js 3.24 KiB / gzip: 1.32 KiB
dist/static/js/scss-7242a203.js 6.50 KiB / gzip: 1.85 KiB
dist/static/js/sophia-16ade9f1.js 2.94 KiB / gzip: 1.31 KiB
dist/static/js/sparql-80e86f3b.js 2.73 KiB / gzip: 1.27 KiB
dist/static/js/swift-5e0c1d7d.js 5.29 KiB / gzip: 2.15 KiB
dist/static/js/solidity-ecf1b4ee.js 18.40 KiB / gzip: 4.47 KiB
dist/static/js/sql-0a0621b8.js 10.30 KiB / gzip: 3.89 KiB
dist/static/js/st-f1fdd5d5.js 7.46 KiB / gzip: 2.32 KiB
dist/static/js/tcl-93b2e7b2.js 3.73 KiB / gzip: 1.47 KiB
dist/static/js/twig-fa486bb3.js 6.07 KiB / gzip: 1.62 KiB
dist/static/js/vb-0829324d.js 5.90 KiB / gzip: 2.15 KiB
dist/static/js/xml-8fb518da.js 2.69 KiB / gzip: 1.11 KiB
dist/static/js/systemverilog-ffa15dc6.js 7.67 KiB / gzip: 2.82 KiB
dist/static/js/yaml-e5a124b1.js 4.24 KiB / gzip: 1.63 KiB
dist/static/js/tsMode-22ed608b.js 21.81 KiB / gzip: 6.30 KiB
dist/static/js/htmlMode-41dd7985.js 33.56 KiB / gzip: 8.85 KiB
dist/static/js/cssMode-9e42ff5b.js 33.03 KiB / gzip: 8.73 KiB
dist/static/js/jsonMode-1af6005d.js 38.92 KiB / gzip: 10.83 KiB
dist/static/css/index-49127184.css 83.35 KiB / gzip: 14.33 KiB
dist/static/js/index-679bd70a.js 2870.25 KiB / gzip: 735.61 KiB
优化后
vite v2.9.12 building for production...
✓ 46 modules transformed.
✓ 93 modules transformed.
✓ 543 modules transformed.
dist/static/css/codicon-71cccbf1.ttf 70.80 KiB
dist/assets/editor.worker.a0146d7d.js 171.11 KiB
dist/assets/ts.worker.8f4f13c7.js 4783.24 KiB
dist/index.html 0.43 KiB
dist/static/js/javascript-8391752c.js 1.21 KiB / gzip: 0.63 KiB
dist/static/js/typescript-c89694e3.js 5.60 KiB / gzip: 2.27 KiB
dist/static/js/tsMode-0232e6d7.js 21.81 KiB / gzip: 6.30 KiB
dist/static/css/index-b865ba57.css 54.70 KiB / gzip: 9.19 KiB
dist/static/js/index-e0572502.js 2253.75 KiB / gzip: 587.84 KiB
