feat: split vendor

.gitignore

@@ -26,3 +26,4 @@ dist-ssr
 .vscode
 # Sentry Config File
 .env.sentry-build-plugin
+stats.html

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",
@@ -94,6 +94,7 @@
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.2.5",
     "react-router": "^6.22.3",
+    "rollup-plugin-visualizer": "^5.12.0",
     "storybook": "^8.0.2",
     "storybook-dark-mode": "^4.0.1",
     "storybook-react-i18next": "3.0.1",

pnpm-lock.yaml

@@ -232,6 +232,9 @@ devDependencies:
   react-router:
     specifier: ^6.22.3
     version: 6.22.3(react@18.2.0)
+  rollup-plugin-visualizer:
+    specifier: ^5.12.0
+    version: 5.12.0
   storybook:
     specifier: ^8.0.2
     version: 8.0.2(react-dom@18.2.0)(react@18.2.0)
@@ -10562,6 +10565,22 @@ packages:
       glob: 7.2.3
     dev: true
 
+  /rollup-plugin-visualizer@5.12.0:
+    resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+    peerDependencies:
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      open: 8.4.2
+      picomatch: 2.3.1
+      source-map: 0.7.4
+      yargs: 17.7.2
+    dev: true
+
   /rollup@4.13.0:
     resolution: {integrity: sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -10810,6 +10829,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /source-map@0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+    dev: true
+
   /space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 

src/component/Refinement/Refinement.tsx

@@ -97,10 +97,9 @@ export default function Refinement() {
           label="Source"
           clearable
           onChange={(values) => {
-            console.log(values);
+            const diff = values
-            const old = new Set(currentVal);
+              .filter((value) => !currentVal.includes(value))
-            const new_ = new Set(values);
+              .concat(currentVal.filter((value) => !values.includes(value)));
-            const diff = old.difference(new_).union(new_.difference(old));
             diff.forEach((value) => refine(value));
           }}
         />

src/router/index.tsx

@@ -2,16 +2,15 @@
 import { lazy } from "react";
 import { createBrowserRouter } from "react-router-dom";
 
-import MainLayout from "@/layout/MainLayout";
-import SearchPage from "@/page/Search";
 import store from "@/store";
 import { markdownToHtml } from "@/utils/remark";
 import { MeiliSearch } from "meilisearch";
 
+const MainLayout = lazy(() => import("@/layout/MainLayout"));
+const SearchPage = lazy(() => import("@/page/Search"));
 const NotFound = lazy(() => import("@/page/Exception/NotFound"));
 const ErrorPage = lazy(() => import("@/page/Exception/ErrorPage"));
 const LoadingPage = lazy(async () => import("@/page/Loading"));
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const ParagraphPage = lazy(async () => import("@/page/Paragraph"));
 const SettingsPage = lazy(async () => import("@/page/Settings"));
 

tsconfig.json

@@ -2,7 +2,11 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": false,
@@ -16,9 +20,17 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "paths": {
-      "@test-utils": ["./test-utils"],
+      "@test-utils": [
-      "@/*": ["./src/*"]
+        "./test-utils"
+      ],
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [
-}
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

vite.config.ts

@@ -2,7 +2,8 @@ import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { resolve } from "path";
 
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { visualizer } from "rollup-plugin-visualizer";
+import { defineConfig, splitVendorChunkPlugin } from "vite";
 
 export default defineConfig({
   server: {
@@ -13,6 +14,14 @@ export default defineConfig({
 
   plugins: [
     react(),
+    splitVendorChunkPlugin(),
+    visualizer({
+      gzipSize: true,
+      brotliSize: true,
+      emitFile: false,
+      filename: "stats.html",
+      open: true,
+    }),
     sentryVitePlugin({
       org: "sentry",
       project: "ds-viewer",
@@ -28,5 +37,36 @@ export default defineConfig({
 
   build: {
     sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes("@mantine")) {
+            return "@mantine";
+          }
+          if (id.includes("@sentry")) {
+            return "@sentry";
+          }
+          if (
+            id.includes("react-router-dom") ||
+            id.includes("@remix-run") ||
+            id.includes("react-router")
+          ) {
+            return "@react-router";
+          }
+          if (id.includes("highlight.js")) {
+            return "highlight.js";
+          }
+          if (
+            id.includes("remark") ||
+            id.includes("rehype") ||
+            id.includes("unified") ||
+            id.includes("mdast") ||
+            id.includes("micromark")
+          ) {
+            return "@rehype";
+          }
+        },
+      },
+    },
   },
 });