fix: replace timeout by link and customize chunks

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.26.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.26",

src/App.jsx

@@ -1,36 +1,38 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import reactLogo from "./assets/react.svg";
+import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
 import "./App.css";
 const Foo = React.lazy(() => import("./Foo"));
 
 function App() {
-  const [count, setCount] = useState(0);
-  const [showFoo, setShowFoo] = useState(false);
-
-  useEffect(() => {
-    setTimeout(() => setShowFoo(true), 30000);
-  });
-
   return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        {showFoo ? <Foo /> : null}
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
+    <BrowserRouter>
+      <div className="App">
+        <div>
+          <a href="https://vitejs.dev" target="_blank">
+            <img src="/vite.svg" className="logo" alt="Vite logo" />
+          </a>
+          <a href="https://reactjs.org" target="_blank">
+            <img src={reactLogo} className="logo react" alt="React logo" />
+          </a>
+        </div>
+        <h1>Vite + React</h1>
+        <div className="card">
+          <Link to="/foo">
+            <button>Go to Foo</button>
+          </Link>
+          <p>
+            Edit <code>src/App.jsx</code> and save to test HMR
+          </p>
+        </div>
+        <p className="read-the-docs">
+          Click on the Vite and React logos to learn more
         </p>
+        <Routes>
+          <Route path="/foo" element={<Foo />} />
+        </Routes>
       </div>
-      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
-    </div>
+    </BrowserRouter>
   );
 }
 

src/Foo.jsx

@@ -1,3 +1,3 @@
-const Foo = () => <p>Foo2</p>;
+const Foo = () => <p>Foo V1</p>;
 
 export default Foo;

vite.config.js

@@ -1,7 +1,33 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import path from 'node:path'
+
+
+const deriveFileNameFromChunkInfo = (chunkInfo) => {
+  if (!chunkInfo.facadeModuleId) {
+    return 'assets/js/[name]-[hash].js';
+  }
+
+  const basename = path.basename(chunkInfo.facadeModuleId);
+  if (basename.startsWith('@')) {
+    return 'assets/js/[name]-[hash].js';
+  }
+
+  const ext = path.extname(chunkInfo.facadeModuleId);
+  const outputFileName = chunkInfo.facadeModuleId.replace(__dirname, 'assets/js').replace(ext, '.js');
+  return outputFileName;
+};
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  build: {
+    rollupOptions: {
+      output: {
+        chunkFileNames: deriveFileNameFromChunkInfo,
+        entryFileNames: deriveFileNameFromChunkInfo,
+        assetFileNames: 'assets/[ext]/[name].[ext]',
+      },
+    },
+  },
 })