mateclaw/mateclaw-ui/vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import { visualizer } from 'rollup-plugin-visualizer'
import { resolve } from 'path'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Treat <model-viewer> as a custom Web Component (registered globally
          // via @google/model-viewer in main.ts) so Vue doesn't try to resolve
          // it as a Vue component and emit a "Failed to resolve component"
          // warning at runtime.
          isCustomElement: (tag) => tag === 'model-viewer',
        },
      },
    }),
    tailwindcss(),
    // ANALYZE=1 pnpm build writes dist/stats.html. Skipped on normal builds so
    // CI artifact upload is opt-in and the Docker image build doesn't waste
    // memory generating an HTML report it never reads.
    process.env.ANALYZE && visualizer({
      filename: 'dist/stats.html',
      open: false,
      gzipSize: true,
      brotliSize: true,
    }),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  // echarts is consumed via subpath modules (echarts/core, echarts/charts, …)
  // that only the route-lazy Dashboard and Wiki graph views import. Vite's
  // startup dep scan never sees these subpaths, so it re-optimizes the first
  // time either route loads — rolling the optimized-deps hash and 504-ing the
  // chunks the in-flight page already referenced. Pre-listing them forces a
  // single consistent pre-bundle at server startup.
  optimizeDeps: {
    include: [
      'echarts/core',
      'echarts/charts',
      'echarts/components',
      'echarts/renderers',
    ],
  },
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:18088',
        changeOrigin: true,
        // ws:true forwards WebSocket Upgrade requests through to the backend.
        // Without it Vite serves the GET /api/v1/talk/ws as a regular HTTP
        // proxy, the Upgrade header gets dropped, and the WS handshake
        // silently fails — frontend stuck on "Connecting", backend never
        // sees the connection. TalkMode (STT) lives on this WS so the
        // whole feature is dead in dev mode without it.
        ws: true,
      },
      // Backend-served per-skill bundled assets (logos / screenshots) — see
      // WebMvcConfig.addResourceHandlers. Without this proxy entry vite
      // treats the path as a SPA route and returns index.html, which the
      // browser then tries to render as an image and shows a broken-icon
      // placeholder for any built-in skill that ships a logo.
      '/skill-assets': {
        target: 'http://localhost:18088',
        changeOrigin: true,
      },
    },
  },
  build: {
    outDir: '../mateclaw-server/src/main/resources/static',
    emptyOutDir: true,
    // Cap warning so a future barrel import (see history with monaco) trips
    // the build log instead of slipping in silently.
    chunkSizeWarningLimit: 1024,
    rollupOptions: {
      output: {
        // Pin heavy vendor libs to named chunks. Two reasons:
        //   1. Cache: bumping a business chunk doesn't invalidate the
        //      monaco / vue-flow bundles, so returning visitors only
        //      re-download the few KB that actually changed.
        //   2. Rollup minify peak heap: keeping monaco out of the route
        //      chunk lets each Worker on the chunk run with a smaller
        //      working set, which is what blew up the Docker build at
        //      1.3.0 (needed --max-old-space-size=6144 as a band-aid).
        //
        // Function form (not the object map) so we can ISOLATE the CommonJS
        // interop helpers into their own tiny chunk. With the object form,
        // Rollup hoisted the shared `commonjsHelpers` module into
        // vendor-mermaid / vendor-markdown; because the eager entry chunk needs
        // that helper, it gained a *static* import of both ~1 MB vendor chunks,
        // and Vite then `modulepreload`-ed them on first paint even though
        // mermaid/markdown are only used on the (lazy) chat route. Splitting the
        // helper into its own leaf chunk lets the entry depend on a few-hundred-
        // byte module instead, so the heavy vendors stay purely on-demand.
        manualChunks(id) {
          // Isolate shared runtime helpers FIRST — before the node_modules gate.
          // The Vite preload helper (\0vite/preload-helper, exported as the
          // __vitePreload used by every lazy route import) and the CommonJS
          // interop helpers are virtual modules with no node_modules path. If one
          // lands inside a heavy vendor chunk, the entry's route-lazy imports pull
          // that whole chunk in as a static dependency and Vite preloads it. A
          // dedicated leaf chunk keeps them out of the vendors.
          if (id.includes('vite/preload-helper') || id.includes('commonjsHelpers')
              || id.includes('commonjs-dynamic-modules') || id.includes('\0commonjs')) {
            return 'vendor-runtime'
          }
          if (!id.includes('node_modules')) return undefined
          if (id.includes('monaco-editor') || id.includes('vue-monaco-editor')) return 'vendor-monaco'
          if (id.includes('@vue-flow')) return 'vendor-vue-flow'
          if (id.includes('/mermaid/')) return 'vendor-mermaid'
          if (id.includes('/echarts/') || id.includes('zrender')) return 'vendor-echarts'
          if (id.includes('element-plus') || id.includes('@element-plus')) return 'vendor-element'
          if (id.includes('/marked') || id.includes('highlight.js') || id.includes('dompurify')) {
            return 'vendor-markdown'
          }
          return undefined
        },
      },
    },
  },
})