apps/x_admin
1
0
Fork 0
mirror of https://gitee.com/xiangheng/x_admin.git synced 2025-12-24 08:12:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

打包优化

Browse Source
This commit is contained in:
xh
2025-12-08 13:58:16 +08:00
parent 78a3c048a1
commit 5acfe8501c
4 changed files with 508 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
admin/index.html
View File

@@ -13,6 +13,8 @@
padding: 0;
}
</style>
<link rel="stylesheet" preload href="/loading.css" />
<script src="/XErr.umd.js"></script>
<script>
// const xErr = new XErr.Base(
@@ -25,8 +27,6 @@
// )
// xErr.SetUid(2) //设置用户ID
</script>
<link rel="stylesheet" href="/src/styles/loading.scss" />
</head>
<body>
<div id="app">
@@ -72,6 +72,6 @@
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
<script type="module" defer src="/src/main.ts"></script>
</body>
</html>

8
admin/package.json
View File

@@ -7,7 +7,7 @@
"dev": "vite",
"dev:prod": "vite --mode prod",
"build": "vite build",
"preview": "vite preview --port 4173",
"preview": "vite preview --port 4173 --mode development",
"build:all": "node ./scripts/build.mjs",
"type-check": "vue-tsc --noEmit --checkJs true --skipLibCheck",
"lint": "eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts src --fix --ignore-path .gitignore",
@@ -35,7 +35,6 @@
"nprogress": "^0.2.0",
"pinia": "^3.0.3",
"query-string": "^9.2.2",
"rolldown-vite": "^7.2.7",
"spark-md5": "^3.0.2",
"vue": "^3.5.25",
"vue-clipboard3": "^2.0.0",
@@ -68,13 +67,10 @@
"typescript": "~5.8.3",
"unplugin-auto-import": "^19.3.0",
"unplugin-vue-components": "^28.7.0",
"vite": "npm:rolldown-vite@7.2.7",
"vite": "8.0.0-beta.0",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-style-import": "^2.0.0",
"vite-plugin-svg-icons": "^2.0.1",
"vue-tsc": "^3.0.6"
},
"overrides": {
"vite": "npm:rolldown-vite@latest"
}
}

437
admin/public/loading.css Normal file
View File

@@ -0,0 +1,437 @@
.x-loading {
height: 100vh;
background: radial-gradient(circle at center, rgb(163, 158, 243), rgb(140, 132, 248))
}
@keyframes txtFlash {
0% {
opacity: 1
}
50% {
opacity: 0.5
}
}
.circle {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
border-radius: 50%
}
.circle .Loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: #fff;
letter-spacing: 2px;
animation: txtFlash 2s linear infinite
}
.circle .dot {
position: absolute;
top: 50%;
left: 50%;
margin-left: -7px;
margin-top: -7px;
width: 14px;
height: 14px;
transform-style: preserve-3d
}
.circle .dot:nth-child(1) {
transform: rotate(10deg) translateY(200px)
}
.circle .dot:nth-child(1)::after,
.circle .dot:nth-child(1)::before {
animation-delay: -0.3333333333s
}
.circle .dot:nth-child(2) {
transform: rotate(20deg) translateY(200px)
}
.circle .dot:nth-child(2)::after,
.circle .dot:nth-child(2)::before {
animation-delay: -0.6666666667s
}
.circle .dot:nth-child(3) {
transform: rotate(30deg) translateY(200px)
}
.circle .dot:nth-child(3)::after,
.circle .dot:nth-child(3)::before {
animation-delay: -1s
}
.circle .dot:nth-child(4) {
transform: rotate(40deg) translateY(200px)
}
.circle .dot:nth-child(4)::after,
.circle .dot:nth-child(4)::before {
animation-delay: -1.3333333333s
}
.circle .dot:nth-child(5) {
transform: rotate(50deg) translateY(200px)
}
.circle .dot:nth-child(5)::after,
.circle .dot:nth-child(5)::before {
animation-delay: -1.6666666667s
}
.circle .dot:nth-child(6) {
transform: rotate(60deg) translateY(200px)
}
.circle .dot:nth-child(6)::after,
.circle .dot:nth-child(6)::before {
animation-delay: -2s
}
.circle .dot:nth-child(7) {
transform: rotate(70deg) translateY(200px)
}
.circle .dot:nth-child(7)::after,
.circle .dot:nth-child(7)::before {
animation-delay: -2.3333333333s
}
.circle .dot:nth-child(8) {
transform: rotate(80deg) translateY(200px)
}
.circle .dot:nth-child(8)::after,
.circle .dot:nth-child(8)::before {
animation-delay: -2.6666666667s
}
.circle .dot:nth-child(9) {
transform: rotate(90deg) translateY(200px)
}
.circle .dot:nth-child(9)::after,
.circle .dot:nth-child(9)::before {
animation-delay: -3s
}
.circle .dot:nth-child(10) {
transform: rotate(100deg) translateY(200px)
}
.circle .dot:nth-child(10)::after,
.circle .dot:nth-child(10)::before {
animation-delay: -3.3333333333s
}
.circle .dot:nth-child(11) {
transform: rotate(110deg) translateY(200px)
}
.circle .dot:nth-child(11)::after,
.circle .dot:nth-child(11)::before {
animation-delay: -3.6666666667s
}
.circle .dot:nth-child(12) {
transform: rotate(120deg) translateY(200px)
}
.circle .dot:nth-child(12)::after,
.circle .dot:nth-child(12)::before {
animation-delay: -4s
}
.circle .dot:nth-child(13) {
transform: rotate(130deg) translateY(200px)
}
.circle .dot:nth-child(13)::after,
.circle .dot:nth-child(13)::before {
animation-delay: -4.3333333333s
}
.circle .dot:nth-child(14) {
transform: rotate(140deg) translateY(200px)
}
.circle .dot:nth-child(14)::after,
.circle .dot:nth-child(14)::before {
animation-delay: -4.6666666667s
}
.circle .dot:nth-child(15) {
transform: rotate(150deg) translateY(200px)
}
.circle .dot:nth-child(15)::after,
.circle .dot:nth-child(15)::before {
animation-delay: -5s
}
.circle .dot:nth-child(16) {
transform: rotate(160deg) translateY(200px)
}
.circle .dot:nth-child(16)::after,
.circle .dot:nth-child(16)::before {
animation-delay: -5.3333333333s
}
.circle .dot:nth-child(17) {
transform: rotate(170deg) translateY(200px)
}
.circle .dot:nth-child(17)::after,
.circle .dot:nth-child(17)::before {
animation-delay: -5.6666666667s
}
.circle .dot:nth-child(18) {
transform: rotate(180deg) translateY(200px)
}
.circle .dot:nth-child(18)::after,
.circle .dot:nth-child(18)::before {
animation-delay: -6s
}
.circle .dot:nth-child(19) {
transform: rotate(190deg) translateY(200px)
}
.circle .dot:nth-child(19)::after,
.circle .dot:nth-child(19)::before {
animation-delay: -6.3333333333s
}
.circle .dot:nth-child(20) {
transform: rotate(200deg) translateY(200px)
}
.circle .dot:nth-child(20)::after,
.circle .dot:nth-child(20)::before {
animation-delay: -6.6666666667s
}
.circle .dot:nth-child(21) {
transform: rotate(210deg) translateY(200px)
}
.circle .dot:nth-child(21)::after,
.circle .dot:nth-child(21)::before {
animation-delay: -7s
}
.circle .dot:nth-child(22) {
transform: rotate(220deg) translateY(200px)
}
.circle .dot:nth-child(22)::after,
.circle .dot:nth-child(22)::before {
animation-delay: -7.3333333333s
}
.circle .dot:nth-child(23) {
transform: rotate(230deg) translateY(200px)
}
.circle .dot:nth-child(23)::after,
.circle .dot:nth-child(23)::before {
animation-delay: -7.6666666667s
}
.circle .dot:nth-child(24) {
transform: rotate(240deg) translateY(200px)
}
.circle .dot:nth-child(24)::after,
.circle .dot:nth-child(24)::before {
animation-delay: -8s
}
.circle .dot:nth-child(25) {
transform: rotate(250deg) translateY(200px)
}
.circle .dot:nth-child(25)::after,
.circle .dot:nth-child(25)::before {
animation-delay: -8.3333333333s
}
.circle .dot:nth-child(26) {
transform: rotate(260deg) translateY(200px)
}
.circle .dot:nth-child(26)::after,
.circle .dot:nth-child(26)::before {
animation-delay: -8.6666666667s
}
.circle .dot:nth-child(27) {
transform: rotate(270deg) translateY(200px)
}
.circle .dot:nth-child(27)::after,
.circle .dot:nth-child(27)::before {
animation-delay: -9s
}
.circle .dot:nth-child(28) {
transform: rotate(280deg) translateY(200px)
}
.circle .dot:nth-child(28)::after,
.circle .dot:nth-child(28)::before {
animation-delay: -9.3333333333s
}
.circle .dot:nth-child(29) {
transform: rotate(290deg) translateY(200px)
}
.circle .dot:nth-child(29)::after,
.circle .dot:nth-child(29)::before {
animation-delay: -9.6666666667s
}
.circle .dot:nth-child(30) {
transform: rotate(300deg) translateY(200px)
}
.circle .dot:nth-child(30)::after,
.circle .dot:nth-child(30)::before {
animation-delay: -10s
}
.circle .dot:nth-child(31) {
transform: rotate(310deg) translateY(200px)
}
.circle .dot:nth-child(31)::after,
.circle .dot:nth-child(31)::before {
animation-delay: -10.3333333333s
}
.circle .dot:nth-child(32) {
transform: rotate(320deg) translateY(200px)
}
.circle .dot:nth-child(32)::after,
.circle .dot:nth-child(32)::before {
animation-delay: -10.6666666667s
}
.circle .dot:nth-child(33) {
transform: rotate(330deg) translateY(200px)
}
.circle .dot:nth-child(33)::after,
.circle .dot:nth-child(33)::before {
animation-delay: -11s
}
.circle .dot:nth-child(34) {
transform: rotate(340deg) translateY(200px)
}
.circle .dot:nth-child(34)::after,
.circle .dot:nth-child(34)::before {
animation-delay: -11.3333333333s
}
.circle .dot:nth-child(35) {
transform: rotate(350deg) translateY(200px)
}
.circle .dot:nth-child(35)::after,
.circle .dot:nth-child(35)::before {
animation-delay: -11.6666666667s
}
.circle .dot:nth-child(36) {
transform: rotate(360deg) translateY(200px)
}
.circle .dot:nth-child(36)::after,
.circle .dot:nth-child(36)::before {
animation-delay: -12s
}
.circle .dot::after,
.circle .dot::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%
}
.circle .dot::after {
top: -100%;
background-color: white;
animation: whiteLoading 2s linear infinite
}
.circle .dot::before {
top: 100%;
background-color: black;
animation: blackLoading 2s linear infinite
}
@keyframes blackLoading {
0% {
animation-timing-function: linear;
transform: translate3d(0, 0, 7px) scale(1)
}
25% {
transform: translate3d(0, -100%, 14px) scale(1.2)
}
50% {
transform: translate3d(0, -200%, 7px) scale(1)
}
75% {
transform: translate3d(0, -100%, 0) scale(0.8)
}
100% {
transform: translate3d(0, 0, 7px) scale(1)
}
}
@keyframes whiteLoading {
0% {
animation-timing-function: linear;
transform: translate3d(0, 0, 7px) scale(1)
}
25% {
transform: translate3d(0, 100%, 0) scale(0.8)
}
50% {
transform: translate3d(0, 200%, 7px) scale(1)
}
75% {
transform: translate3d(0, 100%, 14px) scale(1.2)
}
100% {
transform: translate3d(0, 0, 7px) scale(1)
}
}

80
admin/vite.config.ts
View File

@@ -11,7 +11,7 @@ import Components from 'unplugin-vue-components/vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// import viteCompression from 'vite-plugin-compression'
// import { visualizer } from 'rollup-plugin-visualizer'
import { visualizer } from 'rollup-plugin-visualizer'
// https://vitejs.dev/config/
@@ -31,23 +31,39 @@ export default defineConfig(({ mode }) => {
base: '/',
build: {
sourcemap: true,
rollupOptions: {
rolldownOptions: {
external: ['XErr'],
output: {
advancedChunks: {
groups: [
{
name: 'vue',
test: /node_modules\/vue\//
name: 'vue_vue-router_pinia',
test: /node_modules\/(vue|vue-router|pinia)\//
},
// {
// name: 'vue-router',
// test: /node_modules\/vue-router\//
// },
// pinia
// {
// name: 'pinia',
// test: /node_modules\/pinia\//
// },
// @vueuse/core
{
name: 'vue-router',
test: /node_modules\/vue-router\//
name: '@vueuse',
test: /node_modules\/@vueuse\//
},
{
name: 'element-plus-icons-vue',
test: /node_modules\/@element-plus\/icons-vue\//
},
{
name: 'element-plus',
test: /node_modules\/element-plus\//
},
{
name: 'axios',
test: /node_modules\/axios\//
@@ -66,6 +82,12 @@ export default defineConfig(({ mode }) => {
name: 'vue3-video-play',
test: /node_modules\/vue3-video-play\//
},
// zrender
{
name: 'zrender',
test: /node_modules\/zrender\//
},
// echarts
{
name: 'echarts',
@@ -81,10 +103,40 @@ export default defineConfig(({ mode }) => {
name: 'lodash-es',
test: /node_modules\/lodash-es\//
},
// @logicflow/core
{
name: '@logicflow/core',
test: /node_modules\/@logicflow\/core\//
},
// @logicflow/extension
{
name: '@logicflow/extension',
test: /node_modules\/@logicflow\/extension\//
},
// @wangeditor/editor
{
name: '@wangeditor/editor',
test: /node_modules\/@wangeditor\//
},
// xe-utils
{
name: 'xe-utils',
test: /node_modules\/xe-utils\//
},
// vxe-table
{
name: 'vxe-table',
test: /node_modules\/vxe-table\//
},
// spark-md5
{
name: 'spark-md5',
test: /node_modules\/spark-md5\//
},
// crypto-js
{
name: 'crypto-js',
test: /node_modules\/crypto-js\//
}
]
}
@@ -125,20 +177,20 @@ export default defineConfig(({ mode }) => {
// 配置路劲在你的src里的svg存放文件
iconDirs: [fileURLToPath(new URL('./src/assets/icons', import.meta.url))],
symbolId: 'local-icon-[dir]-[name]'
})
}),
// viteCompression({
// algorithm: 'gzip'
// })
// viteCompression({
// algorithm: 'brotliCompress'
// })
// visualizer({
// gzipSize: false,
// brotliSize: false,
// emitFile: false,
// filename: 'test.html', //分析图生成的文件名
// open: true
// })
visualizer({
gzipSize: false,
brotliSize: false,
emitFile: false,
filename: 'test.html', //分析图生成的文件名
open: true
})
],
resolve: {
alias: {