import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import path from "path";
import { defineConfig } from "vite";
import viteCompression from "vite-plugin-compression";

export default defineConfig(({ mode }) => {
  const isDev = mode === "development";
  const isProd = !isDev;

  return {
    plugins: [
      react(),
      tailwindcss(),
      ...(isProd
        ? [
            viteCompression({
              algorithm: "gzip",
              ext: ".gz",
              threshold: 1024,
              deleteOriginFile: false,
            }),
            viteCompression({
              algorithm: "brotliCompress",
              ext: ".br",
              threshold: 1024,
              deleteOriginFile: false,
            }),
          ]
        : []),
    ],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
      dedupe: ["react", "react-dom"],
    },
    esbuild: isProd
      ? {
          drop: ["console", "debugger"],
          legalComments: "none",
        }
      : undefined,
    optimizeDeps: {
      include: [
        "react",
        "react-dom",
        "react-router-dom",
        "@arco-design/web-react",
        "axios",
        "zustand",
        "i18next",
        "react-i18next",
        "swiper",
      ],
    },
    server: {
      port: 5195,
      proxy: isDev
        ? {
            "/api_client": {
              target: "http://192.168.77.111:8080/",
              // target: "https://wwwtest.popi.art/",
              // target: "https://www.popi.art/",
              secure: false,
              changeOrigin: true,
            },
          }
        : undefined,
    },
    build: {
      target: "es2020",
      minify: "esbuild",
      cssMinify: true,
      cssCodeSplit: true,
      sourcemap: mode !== "production",
      assetsInlineLimit: 4096,
      reportCompressedSize: false,
      modulePreload: { polyfill: true },
      rollupOptions: {
        output: {
          chunkFileNames: "assets/[name]-[hash].js",
          entryFileNames: "assets/[name]-[hash].js",
          assetFileNames: "assets/[name]-[hash][extname]",
          manualChunks: {
            "react-vendor": ["react", "react-dom", "react-router-dom"],
            "arco-vendor": ["@arco-design/web-react"],
            "swiper-vendor": ["swiper"],
            "markdown-vendor": ["react-markdown", "remark-gfm"],
            "data-vendor": ["axios", "i18next", "react-i18next", "zustand"],
          },
        },
      },
      chunkSizeWarningLimit: 1000,
    },
  };
});