build: split chunks, compress files, and auto import components on demand (#60)

src/main.ts

@@ -20,13 +20,10 @@ import router from "./router";
 import { store } from "./store";
 import components from "@/components";
 import i18n from "./locales";
-import "element-plus/dist/index.css";
 import "./styles/index.scss";
-import ElementPlus from "element-plus";
 
 const app = createApp(App);
 
-app.use(ElementPlus, { size: "small", zIndex: 3000 });
 app.use(components);
 app.use(i18n);
 app.use(store);

src/types/auto-imports.d.ts

@@ -0,0 +1,52 @@
+// Generated by 'unplugin-auto-import'
+// We suggest you to commit this file into source control
+declare global {
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+}
+export {}

src/types/components.d.ts

@@ -0,0 +1,47 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    DateCalendar: typeof import('./../components/DateCalendar.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    Graph: typeof import('./../components/Graph.vue')['default']
+    Icon: typeof import('./../components/Icon.vue')['default']
+    Loading: typeof import('element-plus/es')['ElLoadingDirective']
+    Radio: typeof import('./../components/Radio.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Selector: typeof import('./../components/Selector.vue')['default']
+    SelectSingle: typeof import('./../components/SelectSingle.vue')['default']
+    TimePicker: typeof import('./../components/TimePicker.vue')['default']
+  }
+}
+
+export { }

src/views/alarm/Header.vue

@@ -29,6 +29,7 @@ limitations under the License. -->
       <div class="mr-10 ml-10">
         <span class="grey">{{ t("searchKeyword") }}: </span>
         <el-input
+          size="small"
           v-model="keyword"
           class="alarm-tool-input"
           @change="refreshAlarms({ pageNum: 1 })"

src/views/components/ConditionTags.vue

@@ -26,6 +26,7 @@ limitations under the License. -->
         </span>
       </span>
       <el-input
+        size="small"
         v-model="tags"
         class="trace-new-tag"
         @change="addLabels"

src/views/dashboard/List.vue

@@ -28,7 +28,7 @@ limitations under the License. -->
           </el-button>
         </template>
       </el-input>
-      <el-button class="ml-10" size="small" @click="reloadTemplates">
+      <el-button class="ml-10 reload-btn" size="small" @click="reloadTemplates">
         <Icon size="sm" iconName="retry" class="reload" />
         {{ t("reloadDashboards") }}
       </el-button>
@@ -47,6 +47,7 @@ limitations under the License. -->
         :default-sort="{ prop: 'name' }"
         @selection-change="handleSelectionChange"
         height="637px"
+        size="small"
       >
         <el-table-column type="selection" width="55" />
         <el-table-column prop="name" label="Name">
@@ -457,4 +458,9 @@ function changePage(pageIndex: number) {
 .reload {
   margin-right: 3px;
 }
+
+.reload-btn {
+  display: inline-block;
+  margin-left: 10px;
+}
 </style>

src/views/dashboard/related/log/Header.vue

@@ -57,7 +57,7 @@ limitations under the License. -->
   <div class="flex-h row">
     <div class="mr-5 traceId" v-show="!isBrowser">
       <span class="grey mr-5">{{ t("traceID") }}:</span>
-      <el-input v-model="traceId" class="inputs-max" />
+      <el-input v-model="traceId" class="inputs-max" size="small" />
     </div>
     <ConditionTags :type="'LOG'" @update="updateTags" />
   </div>
@@ -75,6 +75,7 @@ limitations under the License. -->
         </span>
       </span>
       <el-input
+        size="small"
         class="inputs-max"
         :placeholder="t('addKeywordsOfContent')"
         v-model="contentStr"
@@ -97,6 +98,7 @@ limitations under the License. -->
       </span>
       <el-input
         class="inputs-max"
+        size="small"
         :placeholder="t('addExcludingKeywordsOfContent')"
         v-model="excludingContentStr"
         @change="addLabels('excludingKeywordsOfContent')"

src/views/dashboard/related/profile/Header.vue

@@ -26,7 +26,7 @@ limitations under the License. -->
     </div> -->
     <div class="mr-10">
       <span class="grey mr-5">{{ t("endpointName") }}:</span>
-      <el-input v-model="endpointName" class="name" />
+      <el-input v-model="endpointName" class="name" size="small" />
     </div>
     <el-button
       class="search-btn"

src/views/dashboard/related/profile/components/NewTask.vue

@@ -17,7 +17,7 @@ limitations under the License. -->
   <div class="profile-task">
     <div>
       <div class="label">{{ t("endpointName") }}</div>
-      <el-input v-model="endpointName" class="profile-input" />
+      <el-input v-model="endpointName" class="profile-input" size="small" />
     </div>
     <div>
       <div class="label">{{ t("monitorTime") }}</div>
@@ -49,7 +49,12 @@ limitations under the License. -->
     </div>
     <div>
       <div class="label">{{ t("minThreshold") }} (ms)</div>
-      <el-input-number class="profile-input" :min="0" v-model="minThreshold" />
+      <el-input-number
+        size="small"
+        class="profile-input"
+        :min="0"
+        v-model="minThreshold"
+      />
     </div>
     <div>
       <div class="label">{{ t("dumpPeriod") }}</div>

src/views/dashboard/related/trace/Filter.vue

@@ -58,7 +58,7 @@ limitations under the License. -->
     </div>
     <div class="mr-5">
       <span class="grey mr-5">{{ t("traceID") }}:</span>
-      <el-input v-model="traceId" class="traceId" />
+      <el-input size="small" v-model="traceId" class="traceId" />
     </div>
   </div>
   <div class="flex-h">
@@ -73,9 +73,9 @@ limitations under the License. -->
     </div> -->
     <div class="mr-5">
       <span class="sm b grey mr-5">{{ t("duration") }}:</span>
-      <el-input class="inputs mr-5" v-model="minTraceDuration" />
+      <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
       <span class="grey mr-5">-</span>
-      <el-input class="inputs" v-model="maxTraceDuration" />
+      <el-input size="small" class="inputs" v-model="maxTraceDuration" />
     </div>
     <ConditionTags :type="'TRACE'" @update="updateTags" />
     <el-button