From d22d717849dc65229f94c68ff963830294d5ffaf Mon Sep 17 00:00:00 2001 From: yoshino-s Date: Tue, 25 Jun 2024 10:40:53 +0800 Subject: [PATCH] feat: split vendor --- .gitignore | 1 + package.json | 3 +- pnpm-lock.yaml | 24 ++++++++++++++ src/component/Refinement/Refinement.tsx | 7 ++--- src/router/index.tsx | 5 ++- tsconfig.json | 22 ++++++++++--- vite.config.ts | 42 ++++++++++++++++++++++++- 7 files changed, 90 insertions(+), 14 deletions(-) diff --git a/.gitignore b/.gitignore index 7252965..596d63c 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,4 @@ dist-ssr .vscode # Sentry Config File .env.sentry-build-plugin +stats.html \ No newline at end of file diff --git a/package.json b/package.json index 7460cc5..be4a4fd 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5c68ebe..b96720f 100644 --- a/pnpm-lock.yaml +++ b/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==} diff --git a/src/component/Refinement/Refinement.tsx b/src/component/Refinement/Refinement.tsx index d91f1aa..3fdafbb 100644 --- a/src/component/Refinement/Refinement.tsx +++ b/src/component/Refinement/Refinement.tsx @@ -97,10 +97,9 @@ export default function Refinement() { label="Source" clearable onChange={(values) => { - console.log(values); - const old = new Set(currentVal); - const new_ = new Set(values); - const diff = old.difference(new_).union(new_.difference(old)); + const diff = values + .filter((value) => !currentVal.includes(value)) + .concat(currentVal.filter((value) => !values.includes(value))); diff.forEach((value) => refine(value)); }} /> diff --git a/src/router/index.tsx b/src/router/index.tsx index 518372b..feabfca 100644 --- a/src/router/index.tsx +++ b/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")); diff --git a/tsconfig.json b/tsconfig.json index 11f8bfe..f85aba2 100644 --- a/tsconfig.json +++ b/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"], - "@/*": ["./src/*"] + "@test-utils": [ + "./test-utils" + ], + "@/*": [ + "./src/*" + ] } }, - "references": [{ "path": "./tsconfig.node.json" }] -} + "references": [ + { + "path": "./tsconfig.node.json" + } + ] +} \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 51e90ff..9265c2e 100644 --- a/vite.config.ts +++ b/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"; + } + }, + }, + }, }, });