chunk by lazy import

Author: purpleeeee

src/client/foundation/App.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { BrowserRouter } from "react-router-dom";
 import { StyleSheetManager } from "styled-components";
 
@@ -13,7 +13,9 @@ export const App = () => {
       <AuthContextProvider>
         <GlobalStyle />
         <BrowserRouter>
-          <Routes />
+          <Suspense fallback={<p>loading...</p>}>
+            <Routes />
+          </Suspense>
         </BrowserRouter>
       </AuthContextProvider>
     </StyleSheetManager>

src/client/foundation/pages/Top/index.js

@@ -1 +1 @@
-export * from "./Top";
+export { Top as default } from "./Top";

src/client/foundation/pages/races/Odds/index.js

@@ -1 +1 @@
-export * from "./Odds";
+export { Odds as default } from "./Odds";

src/client/foundation/pages/races/RaceCard/index.js

@@ -1 +1 @@
-export * from "./RaceCard";
+export { RaceCard as default } from "./RaceCard";

src/client/foundation/pages/races/RaceResult/index.js

@@ -1 +1 @@
-export * from "./RaceResult";
+export { RaceResult as default } from "./RaceResult";

src/client/foundation/routes.jsx

@@ -1,11 +1,12 @@
-import React from "react";
+import React, { lazy } from "react";
 import { Route, Routes as RouterRoutes } from "react-router-dom";
 
 import { CommonLayout } from "./layouts/CommonLayout";
-import { Top } from "./pages/Top";
-import { Odds } from "./pages/races/Odds";
-import { RaceCard } from "./pages/races/RaceCard";
-import { RaceResult } from "./pages/races/RaceResult";
+
+const Top = lazy(() => import("./pages/Top"));
+const Odds = lazy(() => import("./pages/races/Odds"));
+const RaceCard = lazy(() => import("./pages/races/RaceCard"));
+const RaceResult = lazy(() => import("./pages/races/RaceResult"));
 
 /** @type {React.VFC} */
 export const Routes = () => {

webpack.config.js

@@ -18,8 +18,9 @@ const DIST_PUBLIC = abs("./dist/public");
 /** @type {Array<import('webpack').Configuration>} */
 module.exports = [
   {
-    // devtool: "inline-source-map",
-    entry: path.join(SRC_ROOT, "client/index.jsx"),
+    entry: {
+      main: path.join(SRC_ROOT, "client/index.jsx"),
+    },
     mode: "production",
     module: {
       rules: [
@@ -42,8 +43,12 @@ module.exports = [
                 [
                   "@babel/preset-env",
                   {
-                    modules: "cjs",
                     spec: true,
+                    targets: {
+                      esmodules: true,
+                    },
+                    // modules: "cjs",
+                    // modules: false,
                   },
                 ],
                 "@babel/preset-react",
@@ -55,6 +60,7 @@ module.exports = [
     },
     name: "client",
     output: {
+      chunkFilename: "[name].bundle.js",
       path: DIST_PUBLIC,
     },
     plugins: [