perf(build): optimize bundle size by code splitting

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",

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;
 }

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"],
         },
       },
     },