On-demand including

web/babel.config.js

@@ -1,3 +1,20 @@
 module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset']
+  presets: [
+    [
+      '@vue/cli-plugin-babel/preset',
+      {
+        modules: false
+      }
+    ]
+  ],
+  plugins: [
+    [
+      'component',
+      {
+        libraryName: 'element-ui',
+        styleLibraryName: 'theme-chalk'
+      }
+    ],
+    'equire'
+  ]
 }

web/package.json

@@ -28,7 +28,8 @@
     "@vue/cli-plugin-vuex": "~4.5.9",
     "@vue/cli-service": "~4.5.9",
     "@vue/eslint-config-standard": "^5.1.2",
-    "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
+    "babel-plugin-equire": "^1.1.1",
     "eslint": "^7.14.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",

web/src/main.js

@@ -1,8 +1,4 @@
 import Vue from 'vue'
-import ElementUI from 'element-ui'
-import lang from 'element-ui/lib/locale/lang/en'
-import locale from 'element-ui/lib/locale'
-import 'element-ui/lib/theme-chalk/index.css'
 import '@/icons'
 import '@/styles/index.scss'
 
@@ -11,9 +7,7 @@ import router from './router'
 import store from '@/store'
 import 'whatwg-fetch'
 
-locale.use(lang)
+import '@/utils/element-ui'
-
-Vue.use(ElementUI)
 
 import fetch from '@/utils/fetch'
 Vue.prototype.$fetch = fetch

web/src/utils/chart.js

@@ -1,11 +1,9 @@
 import Humanize from 'humanize-plus'
-import echarts from 'echarts/lib/echarts'
 
-import 'echarts/theme/macarons'
+// eslint-disable-next-line
-import 'echarts/lib/chart/bar'
+const echarts = equire(['bar', 'legend', 'title', 'tooltip', 'pie'])
-import 'echarts/lib/chart/pie'
+
-import 'echarts/lib/component/tooltip'
+import './macarons'
-import 'echarts/lib/component/title'
 
 function DrawTrafficChart(elementId, trafficIn, trafficOut) {
   const myChart = echarts.init(document.getElementById(elementId), 'macarons')
@@ -19,7 +17,7 @@ function DrawTrafficChart(elementId, trafficIn, trafficOut) {
     },
     tooltip: {
       trigger: 'item',
-      formatter: function(v) {
+      formatter: function (v) {
         return Humanize.fileSize(v.data.value) + ' (' + v.percent + '%)'
       }
     },
@@ -82,7 +80,7 @@ function DrawProxyChart(elementId, serverInfo) {
     },
     tooltip: {
       trigger: 'item',
-      formatter: function(v) {
+      formatter: function (v) {
         return v.data.value
       }
     },
@@ -157,7 +155,7 @@ function DrawProxyTrafficChart(elementId, trafficInArr, trafficOutArr) {
       axisPointer: {
         type: 'shadow'
       },
-      formatter: function(data) {
+      formatter: function (data) {
         let html = ''
         if (data.length > 0) {
           html += data[0].name + '<br/>'
@@ -189,7 +187,7 @@ function DrawProxyTrafficChart(elementId, trafficInArr, trafficOutArr) {
       {
         type: 'value',
         axisLabel: {
-          formatter: function(value) {
+          formatter: function (value) {
             return Humanize.fileSize(value)
           }
         }

web/src/utils/element-ui.js

@@ -0,0 +1,47 @@
+import lang from 'element-ui/lib/locale/lang/en'
+import locale from 'element-ui/lib/locale'
+import 'element-ui/lib/theme-chalk/index.css'
+import Vue from 'vue'
+
+locale.use(lang)
+
+import {
+  Button,
+  Input,
+  Message,
+  Form,
+  FormItem,
+  Col,
+  Row,
+  Breadcrumb,
+  BreadcrumbItem,
+  Menu,
+  MenuItem,
+  Submenu,
+  Scrollbar,
+  Table,
+  TableColumn,
+  Tag,
+  Popover,
+  MessageBox
+} from 'element-ui'
+
+Vue.use(Button)
+Vue.use(Input)
+Vue.use(Form)
+Vue.use(FormItem)
+Vue.use(Col)
+Vue.use(Row)
+Vue.use(Breadcrumb)
+Vue.use(BreadcrumbItem)
+Vue.use(Menu)
+Vue.use(MenuItem)
+Vue.use(Submenu)
+Vue.use(Scrollbar)
+Vue.use(Table)
+Vue.use(TableColumn)
+Vue.use(Tag)
+Vue.use(Popover)
+
+Vue.prototype.$message = Message
+Vue.prototype.$confirm = MessageBox.confirm

web/src/utils/macarons.js

@@ -0,0 +1,240 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* eslint-disable no-undef */
+// eslint-disable-next-line no-extra-semi
+const echarts = equire(['bar', 'legend', 'title', 'tooltip', 'pie']) // On-demand including
+;(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['exports', 'echarts'], factory)
+  } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+    // CommonJS
+    factory(exports, echarts)
+  } else {
+    // Browser globals
+    factory({}, echarts)
+  }
+})(this, function(exports, echarts) {
+  var log = function(msg) {
+    if (typeof console !== 'undefined') {
+      console && console.error && console.error(msg)
+    }
+  }
+  if (!echarts) {
+    log('ECharts is not Loaded')
+    return
+  }
+
+  var colorPalette = [
+    '#2ec7c9',
+    '#b6a2de',
+    '#5ab1ef',
+    '#ffb980',
+    '#d87a80',
+    '#8d98b3',
+    '#e5cf0d',
+    '#97b552',
+    '#95706d',
+    '#dc69aa',
+    '#07a2a4',
+    '#9a7fd1',
+    '#588dd5',
+    '#f5994e',
+    '#c05050',
+    '#59678c',
+    '#c9ab00',
+    '#7eb00a',
+    '#6f5553',
+    '#c14089'
+  ]
+
+  var theme = {
+    color: colorPalette,
+
+    title: {
+      textStyle: {
+        fontWeight: 'normal',
+        color: '#008acd'
+      }
+    },
+
+    visualMap: {
+      itemWidth: 15,
+      color: ['#5ab1ef', '#e0ffff']
+    },
+
+    toolbox: {
+      iconStyle: {
+        normal: {
+          borderColor: colorPalette[0]
+        }
+      }
+    },
+
+    tooltip: {
+      backgroundColor: 'rgba(50,50,50,0.5)',
+      axisPointer: {
+        type: 'line',
+        lineStyle: {
+          color: '#008acd'
+        },
+        crossStyle: {
+          color: '#008acd'
+        },
+        shadowStyle: {
+          color: 'rgba(200,200,200,0.2)'
+        }
+      }
+    },
+
+    dataZoom: {
+      dataBackgroundColor: '#efefff',
+      fillerColor: 'rgba(182,162,222,0.2)',
+      handleColor: '#008acd'
+    },
+
+    grid: {
+      borderColor: '#eee'
+    },
+
+    categoryAxis: {
+      axisLine: {
+        lineStyle: {
+          color: '#008acd'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#eee']
+        }
+      }
+    },
+
+    valueAxis: {
+      axisLine: {
+        lineStyle: {
+          color: '#008acd'
+        }
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#eee']
+        }
+      }
+    },
+
+    timeline: {
+      lineStyle: {
+        color: '#008acd'
+      },
+      controlStyle: {
+        color: '#008acd',
+        borderColor: '#008acd'
+      },
+      symbol: 'emptyCircle',
+      symbolSize: 3
+    },
+
+    line: {
+      smooth: true,
+      symbol: 'emptyCircle',
+      symbolSize: 3
+    },
+
+    candlestick: {
+      itemStyle: {
+        color: '#d87a80',
+        color0: '#2ec7c9'
+      },
+      lineStyle: {
+        width: 1,
+        color: '#d87a80',
+        color0: '#2ec7c9'
+      },
+      areaStyle: {
+        color: '#2ec7c9',
+        color0: '#b6a2de'
+      }
+    },
+
+    scatter: {
+      symbol: 'circle',
+      symbolSize: 4
+    },
+
+    map: {
+      itemStyle: {
+        color: '#ddd'
+      },
+      areaStyle: {
+        color: '#fe994e'
+      },
+      label: {
+        color: '#d87a80'
+      }
+    },
+
+    graph: {
+      itemStyle: {
+        color: '#d87a80'
+      },
+      linkStyle: {
+        color: '#2ec7c9'
+      }
+    },
+
+    gauge: {
+      axisLine: {
+        lineStyle: {
+          color: [
+            [0.2, '#2ec7c9'],
+            [0.8, '#5ab1ef'],
+            [1, '#d87a80']
+          ],
+          width: 10
+        }
+      },
+      axisTick: {
+        splitNumber: 10,
+        length: 15,
+        lineStyle: {
+          color: 'auto'
+        }
+      },
+      splitLine: {
+        length: 22,
+        lineStyle: {
+          color: 'auto'
+        }
+      },
+      pointer: {
+        width: 5
+      }
+    }
+  }
+
+  echarts.registerTheme('macarons', theme)
+})