/**
 * Vite 构建配置文件
 *
 * 核心职责：
 * 1. Element Plus 按需加载 — 通过 unplugin-vue-components 自动解析组件，无需手动 import
 * 2. 分包策略 — 将 node_modules 拆分为独立 chunk，区分基础组件与后台组件
 * 3. 首屏优化 — 去除 Element Plus modulepreload 标签，避免登录页加载后台 JS/CSS
 *
 * 分包设计：
 * - echarts: 单独打包，仪表盘页按需加载
 * - vue-vendor: Vue/Router/Pinia 核心框架，长期缓存
 * - el-admin: 后台管理页的 Element Plus 组件，进后台后一次性加载
 * - 基础组件（button/input/icon等）: 不单独分包，保持独立小 chunk，供 login/select 页面按需加载
 */
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// login/select 页面用到的 Element Plus 基础组件，保持独立不打包进 el-admin
// 这些组件体积小、首屏即用，独立分包可避免登录页下载后台才用的 JS
const EL_BASE = [
  'button', 'input', 'form', 'form-item',
  'icon', 'avatar', 'empty',
  'message', 'notification', 'loading',
  'popper', 'tooltip', 'overlay', 'config-provider',
  'scrollbar', 'focus-trap', 'collection',
]

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'css' })],
      dts: 'src/types/components.d.ts',
    }),
  // 去掉 Element Plus 预加载：登录/选系统页不预下载后台才用的 JS/CSS
    // 原理：Vite 默认会对所有动态 import 的模块生成 <link rel="modulepreload"> 标签
    // Element Plus 按需加载时也会被预加载，导致首屏下载大量无用 JS
    // 本插件在构建 HTML 时去除这些标签，让组件在真正使用时才加载
    {
      name: 'strip-el-preloads',
      transformIndexHtml(html) {
        // 去掉所有 modulepreload（Element Plus 组件全部按需加载）
        html = html.replace(/<link rel="modulepreload"[^>]*>/g, '')
        // 去掉 el-admin CSS（后台组件样式，login/select 不需要）
        html = html.replace(/<link[^>]*el-admin[^>]*>/g, '')
        return html
      },
    },
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  server: {
    port: 31001,
  },
  build: {
    target: 'es2015',
    cssTarget: 'chrome61',
    rollupOptions: {
      output: {
        manualChunks(id) {
          // ECharts 体积大（~1MB），独立分包，仅在仪表盘页面才动态加载
          if (id.includes('node_modules/echarts'))     return 'echarts'
          // Vue 核心框架长期不变，独立分包以获得最佳缓存命中率
          if (id.includes('node_modules/vue') || id.includes('node_modules/vue-router') || id.includes('node_modules/pinia')) return 'vue-vendor'
          if (id.includes('node_modules/element-plus')) {
            // 基础组件保持独立小 chunk（login/select 页面按需加载），不打包进 el-admin
            if (EL_BASE.some(c => id.includes(`/${c}/`) || id.includes(`/${c}.`) || id.endsWith(`/${c}`))) return
            // 管理后台组件打成一个 el-admin chunk，进后台一次性加载，减少后续页面切换的网络请求
            return 'el-admin'
          }
        },
      },
    },
  },
})