ojnext/rsbuild.config.ts

import { defineConfig, loadEnv } from "@rsbuild/core"
import { pluginVue } from "@rsbuild/plugin-vue"
import AutoImport from "unplugin-auto-import/rspack"
import Components from "unplugin-vue-components/rspack"
import { NaiveUiResolver } from "unplugin-vue-components/resolvers"

export default defineConfig(({ envMode }) => {
  const { publicVars, rawPublicVars } = loadEnv({
    cwd: process.cwd(),
    mode: envMode,
  })

  const url = rawPublicVars["PUBLIC_OJ_URL"]
  const proxyConfig = {
    target: url,
    headers: { Referer: url },
    changeOrigin: true,
  }
  return {
    plugins: [pluginVue()],
    tools: {
      rspack: {
        plugins: [
          AutoImport({
            imports: [
              "vue",
              "vue-router",
              "@vueuse/core",
              "pinia",
              {
                "naive-ui": [
                  "useDialog",
                  "useMessage",
                  "useNotification",
                  "useLoadingBar",
                ],
              },
              {
                from: "naive-ui",
                imports: [
                  "DataTableColumn",
                  "FormRules",
                  "FormItemRule",
                  "SelectOption",
                  "UploadCustomRequestOptions",
                  "UploadFileInfo",
                  "MenuOption",
                  "DropdownDividerOption",
                  "DropdownOption",
                ],
                type: true,
              },
            ],
            dts: "./src/auto-imports.d.ts",
          }),
          Components({
            resolvers: [NaiveUiResolver()],
            dts: "./src/components.d.ts",
          }),
        ],
      },
    },
    html: {
      template: "./index.html",
    },
    source: {
      entry: {
        index: "./src/main.ts",
      },
      define: publicVars,
    },
    performance: {
      chunkSplit: {
        strategy: "split-by-experience",
        forceSplitting: {
          "naive-ui": /node_modules[\\/]naive-ui/,
          "naive-ui-components": /node_modules[\\/]naive-ui[\\/]es[\\/](button|input|form|table|data-table|select|date-picker|time-picker|upload|modal|drawer|popover|tooltip|notification|message|loading-bar|spin|skeleton|pagination|menu|dropdown|tabs|steps|breadcrumb|anchor|affix|back-top|divider|space|grid|layout|card|collapse|descriptions|empty|list|statistic|timeline|tree|transfer|cascader|auto-complete|mention|rate|slider|switch|progress|tag|badge|avatar|image|carousel|calendar|color-picker|dynamic-input|dynamic-tags|gradient-text|number-animation|qr-code|result|split|thing|typography|watermark)/,
          "chart-libs": /node_modules[\\/](chart\.js|vue-chartjs)/,
          "editor-libs": /node_modules[\\/](@wangeditor-next|md-editor-v3|codemirror|@codemirror)/,
          "utils": /node_modules[\\/](date-fns|highlight\.js|copy-text-to-clipboard|canvas-confetti|fflate|query-string)/,
        },
        override: {
          chunks: "all",
          minSize: 20000,
          maxSize: 244000,
          cacheGroups: {
            "naive-ui-core": {
              test: /node_modules[\\/]naive-ui[\\/]es[\\/](config-provider|theme|locale|loading-bar|message|notification|dialog)/,
              name: "naive-ui-core",
              priority: 30,
              chunks: "all",
            },
            "naive-ui-form": {
              test: /node_modules[\\/]naive-ui[\\/]es[\\/](form|input|select|date-picker|time-picker|upload|auto-complete|cascader|mention|rate|slider|switch|dynamic-input|dynamic-tags)/,
              name: "naive-ui-form",
              priority: 25,
              chunks: "all",
            },
            "naive-ui-data": {
              test: /node_modules[\\/]naive-ui[\\/]es[\\/](table|data-table|list|tree|transfer|pagination)/,
              name: "naive-ui-data",
              priority: 25,
              chunks: "all",
            },
            "naive-ui-layout": {
              test: /node_modules[\\/]naive-ui[\\/]es[\\/](layout|grid|space|divider|card|collapse|descriptions|split)/,
              name: "naive-ui-layout",
              priority: 25,
              chunks: "all",
            },
            "naive-ui-feedback": {
              test: /node_modules[\\/]naive-ui[\\/]es[\\/](modal|drawer|popover|tooltip|spin|skeleton|empty|result)/,
              name: "naive-ui-feedback",
              priority: 25,
              chunks: "all",
            },
            "naive-ui-navigation": {
              test: /node_modules[\\/]naive-ui[\\/]es[\\/](menu|dropdown|tabs|steps|breadcrumb|anchor|affix|back-top)/,
              name: "naive-ui-navigation",
              priority: 25,
              chunks: "all",
            },
            "naive-ui-display": {
              test: /node_modules[\\/]naive-ui[\\/]es[\\/](tag|badge|avatar|image|carousel|calendar|statistic|timeline|progress|typography|watermark|gradient-text|number-animation|qr-code|thing)/,
              name: "naive-ui-display",
              priority: 25,
              chunks: "all",
            },
          },
        },
      },
    },
    resolve: {
      alias: {
        "~": "./src",
        utils: "./src/utils",
        oj: "./src/oj",
        admin: "./src/admin",
      },
    },
    server: {
      port: 5173,
      proxy: {
        "/api": proxyConfig,
        "/public": proxyConfig,
      },
    },
  }
})