optimize build size

build/webpack.dev.conf.js

@@ -50,7 +50,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
   },
   plugins: [
     new VueLoaderPlugin(),
-    new MonacoWebpackPlugin(),
+    new MonacoWebpackPlugin({languages: ['json'], features: []}),
     // new webpack.DefinePlugin({
     //   'process.env': require('../config/dev.env')
     // }),

build/webpack.prod.conf.js

@@ -14,6 +14,7 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 const env = require('../config/prod.env')
 
@@ -36,8 +37,10 @@ const webpackConfig = merge(baseWebpackConfig, {
     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
   },
   plugins: [
+    // show bundle analysis if need
+    // new BundleAnalyzerPlugin(),
     new VueLoaderPlugin(),
-    new MonacoWebpackPlugin({languages: ['json']}),
+    new MonacoWebpackPlugin({languages: ['json'], features: []}),
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
     // new webpack.DefinePlugin({
     //   'process.env': env
@@ -154,18 +157,13 @@ const webpackConfig = merge(baseWebpackConfig, {
     ],
     splitChunks: {
       chunks: 'all',
-      cacheGroups: {
-        // commons: {
-        //   name: 'commons',
-        //   chunks: 'initial',
-        //   minChunks: 2
-        // },
-        commons: {
-          test: /[\\/]node_modules[\\/]/,
-          name: 'vendors',
-          chunks: 'all',
-        },
-      }
+      // cacheGroups: {
+      //   commons: {
+      //     test: /[\\/]node_modules[\\/]/,
+      //     name: 'vendors',
+      //     chunks: 'all',
+      //   },
+      // }
     }
   },
 })

config/index.js

@@ -50,9 +50,9 @@ module.exports = {
      * Source Maps
      */
 
-    productionSourceMap: true,
+    productionSourceMap: false,
     // https://webpack.js.org/configuration/devtool/#production
-    devtool: '#source-map',
+    // devtool: '#source-map',
 
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

src/components/JsonEditor.vue

@@ -12,7 +12,8 @@
 </template>
 
 <script type="text/javascript">
-import * as monaco from 'monaco-editor';
+// import * as monaco from 'monaco-editor';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
 export default {
   data() {