Chore: build optimized

.gitignore

@@ -106,3 +106,6 @@ dist
 
 # wincompare file
 .bak
+
+# rollup-plugin-visualizer
+stats.html

src/index.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter } from "react-router-dom";
 
 // third-party
 import { Provider as ReduxProvider } from "react-redux";
+import "react-app-polyfill/ie11";
 
 // scroll bar
 import "simplebar/src/simplebar.css";

src/sections/auth/auth-forms/AuthResetPassword.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, SyntheticEvent } from "react";
+import { SyntheticEvent, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 // material-ui
@@ -15,7 +15,7 @@ import {
   Typography
 } from "@mui/material";
 import { useSnackbar } from "notistack";
-import { EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons";
+import { EyeInvisibleOutlined, EyeOutlined } from "@ant-design/icons";
 
 // third party
 import * as Yup from "yup";

src/sections/dashboard/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import lo from "lodash-es";
 
 // material-ui
 import { Grid } from "@mui/material";

src/sections/dashboard/noticeCarousel.tsx

@@ -1,24 +1,12 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Trans } from "react-i18next";
 import dayjs from "dayjs";
 
 // material-ui
-import {
-  Badge,
-  Box,
-  ButtonBase,
-  Chip,
-  Dialog,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Typography,
-  useMediaQuery
-} from "@mui/material";
+import { Box, ButtonBase, Chip, Dialog, DialogContent, DialogTitle, Typography, useMediaQuery } from "@mui/material";
 import Carousel from "react-material-ui-carousel";
 
 // project imports
-import { useSelector } from "@/store";
 import { useGetNoticesQuery } from "@/store/services/api";
 import { makeStyles } from "@/themes/hooks";
 

src/sections/dashboard/shortcutCard/index.tsx

@@ -1,8 +1,6 @@
 import React from "react";
-import { List, ListItem, ListItemAvatar, ListItemButton, ListItemText } from "@mui/material";
-import Avatar from "@/components/@extended/Avatar";
-import { Trans, useTranslation } from "react-i18next";
-import { QuestionOutlined } from "@ant-design/icons";
+import { List } from "@mui/material";
+import { useTranslation } from "react-i18next";
 import MainCard from "@/components/MainCard";
 import TutorialButton from "@/sections/dashboard/shortcutCard/tutorialButton";
 import SubscribeButton from "@/sections/dashboard/shortcutCard/subscribeButton";

src/sections/dashboard/shortcutCard/purchaseButton.tsx

@@ -1,11 +1,10 @@
 import React, { useMemo } from "react";
 import { ListItem, ListItemAvatar, ListItemButton, ListItemText, Typography } from "@mui/material";
 import Avatar from "@/components/@extended/Avatar";
-import { QuestionOutlined, ShoppingOutlined } from "@ant-design/icons";
+import { ShoppingOutlined } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useGetUserInfoQuery } from "@/store/services/api";
-import { use } from "i18next";
 
 const PurchaseButton: React.FC = () => {
   const { t } = useTranslation();

src/sections/dashboard/subscriptionCard.tsx

@@ -4,16 +4,7 @@ import lo from "lodash-es";
 import { Trans, useTranslation } from "react-i18next";
 
 // material-ui
-import {
-  Box,
-  CardContent,
-  CardHeader,
-  CircularProgress,
-  Divider,
-  LinearProgress,
-  Stack,
-  Typography
-} from "@mui/material";
+import { CircularProgress, LinearProgress, Stack, Typography } from "@mui/material";
 
 // project imports
 import MainCard from "@/components/MainCard";

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES5",
+    "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": true,
@@ -29,5 +29,6 @@
       "@/*": ["*"]
     }
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "scripts", "acceptance-tests", "jest", "cypress"]
 }

vite.config.ts

@@ -1,31 +1,45 @@
-import { defineConfig, splitVendorChunkPlugin } from 'vite';
-import { fileURLToPath, URL } from 'url';
-import react from '@vitejs/plugin-react';
-import { visualizer } from 'rollup-plugin-visualizer';
-import legacy from '@vitejs/plugin-legacy';
-import image from '@rollup/plugin-image';
+import { defineConfig, splitVendorChunkPlugin } from "vite";
+import { fileURLToPath, URL } from "url";
+import react from "@vitejs/plugin-react";
+import { visualizer } from "rollup-plugin-visualizer";
+import image from "@rollup/plugin-image";
 
 /**
  * @type {import('vite').UserConfig}
  * @see https://vitejs.dev/config/
  */
 export default defineConfig({
-  plugins: [
-    react(),
-    visualizer(),
-    legacy({
-      targets: ['defaults', 'not IE 11']
-    }),
-    image(),
-    splitVendorChunkPlugin()
-  ],
+  plugins: [react(), visualizer(), image(), splitVendorChunkPlugin()],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-      lodash: 'lodash-es'
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+      lodash: "lodash-es"
     }
   },
   server: {
     port: 3000
+  },
+  build: {
+    outDir: "dist",
+    assetsDir: "static",
+    cssCodeSplit: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          react: ["react", "react-dom"],
+          router: ["react-router", "react-router-dom"],
+          "mui-core": ["@emotion/react", "@emotion/styled", "@emotion/cache", "@mui/base", "@mui/system"],
+          mui: ["@mui/material"],
+          "mui-plugins": ["@mui/lab", "mui-markdown", "notistack", "@mui/x-date-pickers", "tss-react"],
+          ant: ["@ant-design/icons", "@ant-design/colors"],
+          ahooks: ["ahooks", "@ahooksjs/use-url-state"],
+          axios: ["axios"],
+          lodash: ["lodash-es"],
+          redux: ["redux", "react-redux", "@reduxjs/toolkit"],
+          formik: ["formik", "yup"]
+        },
+        chunkFileNames: "static/js/[name]-[hash].chunk.js"
+      }
+    }
   }
 });