making loading faster!

reZach · Feb 12, 2021 · 8ec6a50 · 8ec6a50
1 parent a295e9f
commit 8ec6a50
Show file tree

Hide file tree

Showing 4 changed files with 11,102 additions and 18,748 deletions.
diff --git a/.babelrc b/.babelrc
@@ -12,7 +12,8 @@
                     "Redux": "./app/src/redux",
                     "I18n": "./app/localization"
                 }
-            }
+            },
+            "@babel/plugin-syntax-dynamic-import"
         ]
     ],
     "presets": [

diff --git a/app/src/core/routes.jsx b/app/src/core/routes.jsx
@@ -1,12 +1,29 @@
 import React from "react";
 import { Switch, Route } from "react-router";
 import ROUTES from "Constants/routes";
-import Welcome from "Pages/welcome/welcome";
-import About from "Pages/about/about";
-import Motd from "Pages/motd/motd";
-import Localization from "Pages/localization/localization";
-import UndoRedo from "Pages/undoredo/undoredo";
-import ContextMenu from "Pages/contextmenu/contextmenu";
+import loadable from "@loadable/component";
+
+// Load bundles asynchronously so that the initial render happens faster
+const Welcome = loadable(() =>
+  import(/* webpackChunkName: "WelcomeChunk" */ "Pages/welcome/welcome")
+);
+const About = loadable(() =>
+  import(/* webpackChunkName: "AboutChunk" */ "Pages/about/about")
+);
+const Motd = loadable(() =>
+  import(/* webpackChunkName: "MotdChunk" */ "Pages/motd/motd")
+);
+const Localization = loadable(() =>
+  import(
+    /* webpackChunkName: "LocalizationChunk" */ "Pages/localization/localization"
+  )
+);
+const UndoRedo = loadable(() =>
+  import(/* webpackChunkName: "UndoRedoChunk" */ "Pages/undoredo/undoredo")
+);
+const ContextMenu = loadable(() =>
+  import(/* webpackChunkName: "ContextMenuChunk" */ "Pages/contextmenu/contextmenu")
+);
 
 class Routes extends React.Component {
   render() {