build: optimize js chunk splitting

1 files changed, 24 insertions, 9 deletions

diff --git a/src/components/Root.js b/src/components/Root.js
index ec77540..bf1de3d 100644
--- a/src/components/Root.js
+++ b/src/components/Root.js
@@ -1,17 +1,30 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Provider } from 'm/store';
 import { HashRouter as Router, Route } from 'react-router-dom';
 import { hot } from 'react-hot-loader/root';
 // import createHistory from 'history/createHashHistory';
 // import createHistory from 'history/createBrowserHistory';
+import Loading from 'c/Loading';
 import ErrorBoundary from 'c/ErrorBoundary';
 import SideBar from 'c/SideBar';
 import Home from 'c/Home';
 import Logs from 'c/Logs';
-import Proxies from 'c/Proxies';
-import Rules from 'c/Rules';
+// import Proxies from 'c/Proxies';
 import Config from 'c/Config';
 
+const Proxies = React.lazy(() =>
+  import(/* webpackChunkName: "proxies" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  './Proxies')
+);
+const Rules = React.lazy(() =>
+  import(/* webpackChunkName: "rules" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  './Rules')
+);
+
 import APIDiscovery from 'c/APIDiscovery';
 
 import { store } from '../store/configureStore';
@@ -32,12 +45,14 @@ const Root = () => (
           <APIDiscovery />
           <Route path="/" render={() => <SideBar />} />
           <div className={s0.content}>
-            <Route exact path="/" render={() => <Home />} />
-            <Route exact path="/overview" render={() => <Home />} />
-            <Route exact path="/configs" render={() => <Config />} />
-            <Route exact path="/logs" render={() => <Logs />} />
-            <Route exact path="/proxies" render={() => <Proxies />} />
-            <Route exact path="/rules" render={() => <Rules />} />
+            <Suspense fallback={<Loading height="200px" />} maxDuration={10}>
+              <Route exact path="/" render={() => <Home />} />
+              <Route exact path="/overview" render={() => <Home />} />
+              <Route exact path="/configs" render={() => <Config />} />
+              <Route exact path="/logs" render={() => <Logs />} />
+              <Route exact path="/proxies" render={() => <Proxies />} />
+              <Route exact path="/rules" render={() => <Rules />} />
+            </Suspense>
           </div>
         </div>
       </Router>