vite.master.config.ts

import { defineConfig, UserConfigExport } from "vite";
// 可视化打包文件
import { visualizer } from "rollup-plugin-visualizer";

// gzip
import viteCompression from "vite-plugin-compression";
// polyfill
import legacy from "@vitejs/plugin-legacy";

//get build time
import getBulidTime from "./getbuildtime";

//redictPath
export const addProjectPath = (originPath: string) => `../${originPath}`;

const ProdinjectScript = `<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DTCJR7156E"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-DTCJR7156E');
</script>
<!-- Microsoft Clarity -->
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "ftyk5fzt4o");
</script>
`;
import { createHtmlPlugin } from "vite-plugin-html";
import { mergeConfig } from "vite";
import vitedevConfig from "./vite.dev.config";
// https://vitejs.dev/config/

export const commonBuildConfig: UserConfigExport = mergeConfig(
  defineConfig({
    plugins: [
      createHtmlPlugin({
        entry: "src/main.tsx",
        template: "index.html",
        inject: {
          data: {
            injectScript: ProdinjectScript,
          },
        },
      }),
      //@ts-ignore
      getBulidTime(),
    ],
  }),
  vitedevConfig
);

export default mergeConfig(
  commonBuildConfig,
  defineConfig({
    define: {
      isdev: false,
    },
    plugins: [
      legacy({
        // 设置目标浏览器，browserslist 配置语法
        targets: [
          "defaults",
          "iOS >= 9, Android >= 4.4, last 2 versions, > 0.2%, not dead",
        ],
      }),
      { ...viteCompression(), apply: "build" },
    ],
    build: {
      sourcemap: true,
      outDir: "dist",
      emptyOutDir: true,
      reportCompressedSize: false,
      minify: "esbuild",
      rollupOptions: {
        output: {
          manualChunks: {
            react: ["react", "react-dom"],
            "react-router": ["react-router-dom"],
            "react-redux": ["@reduxjs/toolkit", "react-redux"],
            masonic: ["masonic"],
            sentry: ["@sentry/react", "@sentry/tracing"],
            axios: ["axios"],
            lib: [
              "@mui/icons-material",
              "@mui/lab",
              "@mui/material",
              "@emotion/react",
              "@emotion/styled",
            ],
            transform: ["json-bigint"],
            "dnd-tool": [
              "@dnd-kit/core",
              "@dnd-kit/modifiers",
              "@dnd-kit/sortable",
              "@dnd-kit/utilities",
            ],
            ployfill: [
              "intersection-observer",
              "react-flip-toolkit",
              "react-intersection-observer",
              "dayjs",
            ],
            "react-photo-view": ["react-photo-view"],
          },
        },
      },
    },
  })
);