From eed07ce67f410f6afecf525d5f963360e7c09cdc Mon Sep 17 00:00:00 2001
From: Neko Aria <990879119@qq.com>
Date: Sun, 20 Oct 2024 03:08:58 +0800
Subject: [PATCH] perf(build): optimize bundle size by code splitting

---
 package.json                         |  2 --
 pnpm-lock.yaml                       | 19 -------------------
 src/components/Article/CodeBlock.css |  8 ++++----
 vite.config.js                       | 11 ++++++-----
 4 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 13d005f78..cef0f0920 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
     "classnames": "^2.5.1",
     "dayjs": "^1.11.13",
     "framer-motion": "^11.11.9",
-    "highlight.js": "^11.10.0",
     "html-react-parser": "^5.1.18",
     "nanostores": "^0.11.3",
     "node-polyglot": "^2.6.0",
@@ -58,7 +57,6 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.3",
     "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.2",
     "depcheck": "^1.4.7",
     "husky": "^9.1.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 475b140df..5dfb9aee0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,9 +35,6 @@ importers:
       framer-motion:
         specifier: ^11.11.9
         version: 11.11.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      highlight.js:
-        specifier: ^11.10.0
-        version: 11.10.0
       html-react-parser:
         specifier: ^5.1.18
         version: 5.1.18(@types/react@18.3.11)(react@18.3.1)
@@ -87,9 +84,6 @@ importers:
       '@types/react':
         specifier: ^18.3.11
         version: 18.3.11
-      '@types/react-dom':
-        specifier: ^18.3.1
-        version: 18.3.1
       '@vitejs/plugin-react':
         specifier: ^4.3.2
         version: 4.3.2(vite@5.4.8(terser@5.32.0))
@@ -1126,9 +1120,6 @@ packages:
   '@types/prop-types@15.7.12':
     resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
 
-  '@types/react-dom@18.3.1':
-    resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==}
-
   '@types/react@18.3.11':
     resolution: {integrity: sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==}
 
@@ -1820,10 +1811,6 @@ packages:
   highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
 
-  highlight.js@11.10.0:
-    resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
-    engines: {node: '>=12.0.0'}
-
   highlightjs-vue@1.0.0:
     resolution: {integrity: sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==}
 
@@ -4163,10 +4150,6 @@ snapshots:
 
   '@types/prop-types@15.7.12': {}
 
-  '@types/react-dom@18.3.1':
-    dependencies:
-      '@types/react': 18.3.11
-
   '@types/react@18.3.11':
     dependencies:
       '@types/prop-types': 15.7.12
@@ -4962,8 +4945,6 @@ snapshots:
 
   highlight.js@10.7.3: {}
 
-  highlight.js@11.10.0: {}
-
   highlightjs-vue@1.0.0: {}
 
   homedir-polyfill@1.0.3:
diff --git a/src/components/Article/CodeBlock.css b/src/components/Article/CodeBlock.css
index bda2731ea..25706909c 100644
--- a/src/components/Article/CodeBlock.css
+++ b/src/components/Article/CodeBlock.css
@@ -5,15 +5,15 @@
 .language-selector,
 .copy-button {
     position: absolute;
-    top: 10px;
+    top: 3px;
     z-index: 1;
 }
 
 .language-selector {
-    right: 52px;
-    width: 80px;
+    right: 38px;
+    width: 100px;
 }
 
 .copy-button {
-    right: 10px;
+    right: 3px;
 }
diff --git a/vite.config.js b/vite.config.js
index e434c85ce..bf30ff61d 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,7 +7,9 @@ export default defineConfig({
   plugins: [
     react(),
     VitePWA({ registerType: "autoUpdate" }),
-    // visualizer(),
+    // visualizer({
+    //   gzipSize: true,
+    // }),
   ],
   server: {
     host: "0.0.0.0",
@@ -17,10 +19,9 @@ export default defineConfig({
     outDir: "build",
     rollupOptions: {
       output: {
-        manualChunks: (id) => {
-          if (id.includes("node_modules")) {
-            return "vendor";
-          }
+        manualChunks: {
+          "react-vendor": ["react", "react-dom"],
+          "arco-vendor": ["@arco-design/web-react"],
         },
       },
     },