feat(frontend): optimize build chunks

2026-05-15 19:41:36 +08:00
parent 787b01749c
commit 2f3eb33c13
1 changed files with 97 additions and 0 deletions
@@ -38,6 +38,13 @@ export default defineConfig(({ mode }) => {
        },
      },
    },
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: splitVendorChunk,
+        },
+      },
+    },
  }
 })

@@ -49,3 +56,93 @@ function parseAllowedHosts(value?: string) {

  return hosts && hosts.length > 0 ? hosts : ['localhost', '127.0.0.1']
 }
+
+const elementPlusChunkGroups: Array<[string, string[]]> = [
+  [
+    'element-plus-form',
+    [
+      '/components/form',
+      '/components/input',
+      '/components/select',
+      '/components/date-picker',
+      '/components/checkbox',
+      '/components/radio',
+      '/components/switch',
+      '/components/upload',
+    ],
+  ],
+  [
+    'element-plus-data',
+    [
+      '/components/table',
+      '/components/pagination',
+      '/components/tag',
+      '/components/card',
+      '/components/descriptions',
+      '/components/empty',
+    ],
+  ],
+  [
+    'element-plus-feedback',
+    [
+      '/components/message',
+      '/components/message-box',
+      '/components/dialog',
+      '/components/popover',
+      '/components/tooltip',
+      '/components/loading',
+    ],
+  ],
+  [
+    'element-plus-navigation',
+    ['/components/menu', '/components/tabs', '/components/breadcrumb', '/components/dropdown'],
+  ],
+  [
+    'element-plus-layout',
+    [
+      '/components/container',
+      '/components/row',
+      '/components/col',
+      '/components/space',
+      '/components/divider',
+    ],
+  ],
+]
+
+function splitVendorChunk(id: string) {
+  if (!id.includes('/node_modules/')) {
+    return
+  }
+
+  if (id.includes('/node_modules/@element-plus/icons-vue/')) {
+    return 'element-plus-icons'
+  }
+
+  if (id.includes('/node_modules/element-plus/')) {
+    return splitElementPlusChunk(id)
+  }
+
+  if (id.includes('/node_modules/vue/') || id.includes('/node_modules/vue-router/')) {
+    return 'vue-vendor'
+  }
+
+  if (id.includes('/node_modules/axios/')) {
+    return 'axios'
+  }
+
+  if (id.includes('/node_modules/qrcode/')) {
+    return 'qrcode'
+  }
+
+  return 'vendor'
+}
+
+function splitElementPlusChunk(id: string) {
+  for (const [chunkName, includesList] of elementPlusChunkGroups) {
+    if (includesList.some((includePath) => id.includes(includePath))) {
+      return chunkName
+    }
+  }
+
+  return 'element-plus-core'
+}