perf(options): minimize monaco-editor bundle size

build/webpack.base.conf.js

@@ -65,7 +65,27 @@ module.exports = {
       template: path.resolve(__dirname, '../public/options.html'),
     }),
     new CleanObsoleteChunks(),
-    new MonacoWebpackPlugin(),
+    new MonacoWebpackPlugin({
+      languages: ['javascript', 'typescript'],
+      features: [
+        '!accessibilityHelp',
+        '!anchorSelect',
+        '!codeAction',
+        '!fontZoom',
+        '!gotoError',
+        '!gotoLine',
+        '!gotoSymbol',
+        '!iPadShowKeyboard',
+        '!quickCommand',
+        '!quickHelp',
+        '!quickOutline',
+        '!referenceSearch',
+        '!toggleTabFocusMode',
+        '!transpose',
+        '!unusualLineTerminators',
+        '!viewportSemanticTokens',
+      ],
+    }),
     new VueLoaderPlugin(),
     new MiniCssExtractPlugin({
       // determine the output path

package.json

@@ -10,7 +10,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint --fix --ext .js,.vue src/",
     "dev": "webpack --watch --config ./build/webpack.dev.conf.js",
-    "build": "webpack --config ./build/webpack.prod.conf.js"
+    "build": "webpack --config ./build/webpack.prod.conf.js",
+    "analyze": "webpack --config ./build/webpack.prod.conf.js --analyze"
   },
   "repository": {
     "type": "git",
@@ -45,6 +46,7 @@
     "vue-loader": "^15.9.5",
     "vue-template-compiler": "^2.6.12",
     "webpack": "^5.4.0",
+    "webpack-bundle-analyzer": "^4.1.0",
     "webpack-clean-obsolete-chunks": "^0.4.0",
     "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^3.11.0"

src/options/App.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import * as monaco from 'monaco-editor'
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 import { API_ORIGIN, API_FORMATTER_STR } from '../constants'
 
 let editor = null