github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-01 07:25:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Fine0830 2022-04-11 22:36:16 +08:00 committed by GitHub
parent 1d83e14f22
commit 3b4c3cc4ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 1014 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.licenserc.yaml
View File

@ -28,6 +28,8 @@ header:
- '.gitignore' - '.gitignore'
- '.prettierrc' - '.prettierrc'
- '.browserslistrc' - '.browserslistrc'
- 'src/types/auto-imports.d.ts'
- 'src/types/components.d.ts'
- '**/*.md' - '**/*.md'
- '**/*.json' - '**/*.json'

21
.prettierignore Normal file
View File

@ -0,0 +1,21 @@
#
# 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.
#
/src/types/auto-imports.d.ts
/src/types/components.d.ts

831
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "skywalking-booster-ui", "name": "skywalking-booster-ui",
"version": "0.1.0", "version": "9.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
@ -46,6 +46,7 @@
"@vue/eslint-config-typescript": "^7.0.0", "@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "^2.0.0-0", "@vue/test-utils": "^2.0.0-0",
"babel-jest": "^24.9.0", "babel-jest": "^24.9.0",
"compression-webpack-plugin": "^6.1.1",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1", "eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0", "eslint-plugin-vue": "^7.0.0",
@ -63,6 +64,8 @@
"stylelint-order": "^5.0.0", "stylelint-order": "^5.0.0",
"svg-sprite-loader": "^6.0.11", "svg-sprite-loader": "^6.0.11",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"unplugin-auto-import": "^0.7.0",
"unplugin-vue-components": "^0.19.2",
"vue-jest": "^5.0.0-0" "vue-jest": "^5.0.0-0"
}, },
"eslintConfig": { "eslintConfig": {
@ -103,6 +106,9 @@
} }
] ]
}, },
"eslintIgnore": [
"vue.config.js"
],
"browserslist": [ "browserslist": [
"> 1%", "> 1%",
"last 2 versions", "last 2 versions",
@ -133,7 +139,7 @@
"package.json": [ "package.json": [
"prettier --write" "prettier --write"
], ],
"*.{scss,less,styl,html}": [ "*.{scss,less,styl}": [
"stylelint --fix", "stylelint --fix",
"prettier --write" "prettier --write"
], ],

2
public/index.html
View File

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

3
src/main.ts
View File

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

52
src/types/auto-imports.d.ts vendored Normal file
View File

@ -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 {}

47
src/types/components.d.ts vendored Normal file
View File

@ -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 { }

1
src/views/alarm/Header.vue
View File

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

1
src/views/components/ConditionTags.vue
View File

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

8
src/views/dashboard/List.vue
View File

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

4
src/views/dashboard/related/log/Header.vue
View File

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

2
src/views/dashboard/related/profile/Header.vue
View File

@ -26,7 +26,7 @@ limitations under the License. -->
</div> --> </div> -->
<div class="mr-10"> <div class="mr-10">
<span class="grey mr-5">{{ t("endpointName") }}:</span> <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> </div>
<el-button <el-button
class="search-btn" class="search-btn"

9
src/views/dashboard/related/profile/components/NewTask.vue
View File

@ -17,7 +17,7 @@ limitations under the License. -->
<div class="profile-task"> <div class="profile-task">
<div> <div>
<div class="label">{{ t("endpointName") }}</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> <div>
<div class="label">{{ t("monitorTime") }}</div> <div class="label">{{ t("monitorTime") }}</div>
@ -49,7 +49,12 @@ limitations under the License. -->
</div> </div>
<div> <div>
<div class="label">{{ t("minThreshold") }} (ms)</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> <div>
<div class="label">{{ t("dumpPeriod") }}</div> <div class="label">{{ t("dumpPeriod") }}</div>

6
src/views/dashboard/related/trace/Filter.vue
View File

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

63
vue.config.js
View File

@ -14,6 +14,12 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
module.exports = { module.exports = {
outputDir: "dist", outputDir: "dist",
productionSourceMap: false, productionSourceMap: false,
@ -25,6 +31,9 @@ module.exports = {
}, },
}, },
}, },
css: {
extract: { ignoreOrder: true },
},
chainWebpack: (config) => { chainWebpack: (config) => {
config.plugin("html").tap((args) => { config.plugin("html").tap((args) => {
args[0].title = "Apache SkyWalking"; args[0].title = "Apache SkyWalking";
@ -46,20 +55,62 @@ module.exports = {
splitChunks: { splitChunks: {
chunks: "all", chunks: "all",
minSize: 20000, minSize: 20000,
maxSize: 2000000, minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: { cacheGroups: {
echarts: { echarts: {
name: "echarts", name: "echarts",
test: /[\\/]node_modules[\\/]echarts[\\/]/, test: /[\\/]node_modules[\\/]echarts|zrender[\\/]/,
priority: 20, priority: 30,
}, },
elementPlus: { elementPlus: {
name: "elementPlus", name: "element-plus",
test: /[\\/]node_modules[\\/]element-plus[\\/]/, test: /[\\/]node_modules[\\/]element-plus|@element-plus[\\/]/,
priority: 19, priority: 10,
},
defaultVendors: {
name: "chunk-vendors",
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: "async",
},
default: {
name: "chunk-commons",
minSize: 0,
minChunks: 2,
priority: -20,
}, },
}, },
}, },
}; };
config.plugins.push(
AutoImport({
imports: ["vue"],
resolvers: [
ElementPlusResolver({
importStyle: "css",
exclude: new RegExp(/^(?!.*loading-directive).*$/),
}),
],
dts: "./src/types/auto-imports.d.ts",
}),
Components({
resolvers: [ElementPlusResolver({ importStyle: "css" })],
dts: "./src/types/components.d.ts",
})
);
if (process.env.NODE_ENV === "production") {
const productionGzipExtensions = ["html", "js", "css"];
config.plugins.push(
new CompressionWebpackPlugin({
filename: "[path][base].gz",
algorithm: "gzip",
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
threshold: 10240,
})
);
}
}, },
}; };