mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-04-30 14:43:58 +00:00
build: split chunks, compress files, and auto import components on demand (#60)
This commit is contained in:
Fine0830
GitHub
parent
1d83e14f22
commit
3b4c3cc4ea
@ -28,6 +28,8 @@ header:
|
||||
- '.gitignore'
|
||||
- '.prettierrc'
|
||||
- '.browserslistrc'
|
||||
- 'src/types/auto-imports.d.ts'
|
||||
- 'src/types/components.d.ts'
|
||||
- '**/*.md'
|
||||
- '**/*.json'
|
||||
|
||||
|
||||
21
.prettierignore
Normal file
21
.prettierignore
Normal 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
831
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "skywalking-booster-ui",
|
||||
"version": "0.1.0",
|
||||
"version": "9.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
@ -46,6 +46,7 @@
|
||||
"@vue/eslint-config-typescript": "^7.0.0",
|
||||
"@vue/test-utils": "^2.0.0-0",
|
||||
"babel-jest": "^24.9.0",
|
||||
"compression-webpack-plugin": "^6.1.1",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
@ -63,6 +64,8 @@
|
||||
"stylelint-order": "^5.0.0",
|
||||
"svg-sprite-loader": "^6.0.11",
|
||||
"typescript": "~4.4.4",
|
||||
"unplugin-auto-import": "^0.7.0",
|
||||
"unplugin-vue-components": "^0.19.2",
|
||||
"vue-jest": "^5.0.0-0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
@ -103,6 +106,9 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"eslintIgnore": [
|
||||
"vue.config.js"
|
||||
],
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
@ -133,7 +139,7 @@
|
||||
"package.json": [
|
||||
"prettier --write"
|
||||
],
|
||||
"*.{scss,less,styl,html}": [
|
||||
"*.{scss,less,styl}": [
|
||||
"stylelint --fix",
|
||||
"prettier --write"
|
||||
],
|
||||
|
||||
@ -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
|
||||
limitations under the License. -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
@ -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);
|
||||
|
||||
52
src/types/auto-imports.d.ts
vendored
Normal file
52
src/types/auto-imports.d.ts
vendored
Normal 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
47
src/types/components.d.ts
vendored
Normal 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 { }
|
||||
@ -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 })"
|
||||
|
||||
@ -26,6 +26,7 @@ limitations under the License. -->
|
||||
</span>
|
||||
</span>
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="tags"
|
||||
class="trace-new-tag"
|
||||
@change="addLabels"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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')"
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -14,6 +14,12 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* 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 = {
|
||||
outputDir: "dist",
|
||||
productionSourceMap: false,
|
||||
@ -25,6 +31,9 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
},
|
||||
css: {
|
||||
extract: { ignoreOrder: true },
|
||||
},
|
||||
chainWebpack: (config) => {
|
||||
config.plugin("html").tap((args) => {
|
||||
args[0].title = "Apache SkyWalking";
|
||||
@ -46,20 +55,62 @@ module.exports = {
|
||||
splitChunks: {
|
||||
chunks: "all",
|
||||
minSize: 20000,
|
||||
maxSize: 2000000,
|
||||
minChunks: 1,
|
||||
maxAsyncRequests: 30,
|
||||
maxInitialRequests: 30,
|
||||
enforceSizeThreshold: 50000,
|
||||
cacheGroups: {
|
||||
echarts: {
|
||||
name: "echarts",
|
||||
test: /[\\/]node_modules[\\/]echarts[\\/]/,
|
||||
priority: 20,
|
||||
test: /[\\/]node_modules[\\/]echarts|zrender[\\/]/,
|
||||
priority: 30,
|
||||
},
|
||||
elementPlus: {
|
||||
name: "elementPlus",
|
||||
test: /[\\/]node_modules[\\/]element-plus[\\/]/,
|
||||
priority: 19,
|
||||
name: "element-plus",
|
||||
test: /[\\/]node_modules[\\/]element-plus|@element-plus[\\/]/,
|
||||
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,
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user