use babel chunk path name plugin

.babelrc

@@ -3,5 +3,6 @@
     "@babel/preset-env",
     ["@babel/preset-react", { "runtime": "automatic" }]
   ],
-  "ignore": ["./src/workers"]
+  "ignore": ["./src/workers"],
+  "plugins": ["path-chunk-name"]
 }

package.json

@@ -43,6 +43,7 @@
     "@eslint/js": "^9.11.0",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
+    "babel-plugin-path-chunk-name": "^1.3.1",
     "clean-webpack-plugin": "^4.0.0",
     "cname-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.3",

src/index.js

@@ -9,31 +9,16 @@ import Layout from 'components/Layout';
 import SettingsProvider from 'components/SettingsProvider';
 import SuspenseFallback from 'components/SuspenseFallback';
 
-const Home = lazy(
-  () => import(/* webpackChunkName: "home" */ 'components/Home')
-);
-const FilamentUsage = lazy(
-  () => import(/* webpackChunkName: "filament" */ 'components/FilamentUsage')
-);
-const SpoolWeight = lazy(
-  () => import(/* webpackChunkName: "spool" */ 'components/SpoolWeight')
-);
-const SpoolDimensions = lazy(
-  () => import(/* webpackChunkName: "spool" */ 'components/SpoolDimensions')
-);
+const Home = lazy(() => import('components/Home'));
+const FilamentUsage = lazy(() => import('components/FilamentUsage'));
+const SpoolWeight = lazy(() => import('components/SpoolWeight'));
+const SpoolDimensions = lazy(() => import('components/SpoolDimensions'));
 const ExtruderCalibration = lazy(
-  () =>
-    import(/* webpackChunkName: "extruder" */ 'components/ExtruderCalibration')
-);
-const VolumetricFlow = lazy(
-  () => import(/* webpackChunkName: "flow" */ 'components/VolumetricFlow')
-);
-const ZAxisCalibration = lazy(
-  () => import(/* webpackChunkName: "zaxis" */ 'components/ZAxisCalibration')
-);
-const SpoolDatabase = lazy(
-  () => import(/* webpackChunkName: "spools" */ 'components/SpoolDatabase')
+  () => import('components/ExtruderCalibration')
 );
+const VolumetricFlow = lazy(() => import('components/VolumetricFlow'));
+const ZAxisCalibration = lazy(() => import('components/ZAxisCalibration'));
+const SpoolDatabase = lazy(() => import('components/SpoolDatabase'));
 
 const root = createRoot(document.getElementById('root'));