diff --git a/apps/frontend/vite.config.ts b/apps/frontend/vite.config.ts index 0f825b24..1b7f2e33 100644 --- a/apps/frontend/vite.config.ts +++ b/apps/frontend/vite.config.ts @@ -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' +}