Chunking

exam/react/package.json

@@ -18,7 +18,6 @@
     "@tanstack/react-form": "^0.26.4",
     "@tanstack/react-query": "^5.51.11",
     "@tanstack/react-router": "^1.45.8",
-    "@types/node": "^20.14.12",
     "i18next": "^23.12.2",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",
@@ -33,6 +32,7 @@
     "@tanstack/react-query-devtools": "^5.51.11",
     "@tanstack/router-devtools": "^1.45.8",
     "@tanstack/router-plugin": "^1.45.8",
+    "@types/node": "^20.14.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.15.0",

exam/react/src/components/Post/Post.tsx

@@ -15,14 +15,7 @@ const Post: FC<Props> = ({ post }) => {
       <CardHeader
         avatar={
           'id' in post.user ? (
-            <MUILink
-              component={Link}
-              to="/profile/$id"
-              params={{ id: post.user.id }}
-              color="#FFF"
-              variant="h6"
-              underline="none"
-            >
+            <MUILink component={Link} to="/profile/$id" params={{ id: post.user.id }} underline="none">
               <Avatar alt={post.user.username} src={`storage/${post.user.image}`} />
             </MUILink>
           ) : (

exam/react/vite.config.ts

@@ -12,24 +12,18 @@ export default defineConfig({
     // sourcemap: true,
     rollupOptions: {
       output: {
-        manualChunks: (id) => {
-          const segments = id.split('node_modules');
-          const cleanID = segments[segments.length - 1];
-
-          console.log('ID', cleanID);
-          if (id.includes('node_modules')) {
-            if (cleanID.includes('react')) {
-              return 'vendor_A_react';
-            }
-            if (cleanID.includes('@mui/') || cleanID.includes('@emotion')) {
-              return 'vendor_mui';
-            }
-            if (cleanID.includes('@tanstack')) {
-              return 'vendor_tanstack';
-            }
-
-            return 'vendor_X'; // all other package goes here
-          }
+        manualChunks: {
+          react: ['react', 'react-dom'],
+          mui: ['@emotion/react', '@emotion/styled', '@fontsource/roboto', '@mui/icons-material', '@mui/material'],
+          tanstack: [
+            '@tanstack/react-form',
+            '@tanstack/react-query',
+            '@tanstack/react-query',
+            '@tanstack/react-query-devtools',
+            '@tanstack/router-devtools',
+          ],
+          i18n: ['i18next', 'i18next-browser-languagedetector', 'i18next-http-backend', 'react-i18next'],
+          zustand: ['zustand'],
         },
       },
     },