feat: do code-splitting with react-router

fritx · fritx · commit e28a6f297db8 · 2020-04-25T22:57:07.000+08:00
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "main": "build/index.html",
   "unpkg": "build/index.html",
   "dependencies": {
+    "@loadable/component": "^5.12.0",
     "antd": "^3.26.12",
     "axios": "^0.19.0",
     "codemirror": "^5.52.2",
@@ -24,6 +25,7 @@
   "devDependencies": {
     "@types/babel__standalone": "^7.1.2",
     "@types/jest": "24.0.15",
+    "@types/loadable__component": "^5.10.0",
     "@types/lodash": "^4.14.149",
     "@types/node": "12.0.10",
     "@types/react": "16.8.22",
diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
@@ -1,12 +1,20 @@
+import loadable from '@loadable/component';
 import React from 'react';
 import {
   HashRouter as Router,
+  Redirect,
   Route,
   Switch,
-  Redirect,
 } from 'react-router-dom';
-import { Gallery } from './gallery';
-import { Playground } from './playground';
+
+// react-router code-splitting
+// https://reacttraining.com/react-router/web/guides/code-splitting
+let Gallery = loadable(async () => {
+  return (await import('./gallery')).Gallery;
+});
+let Playground = loadable(async () => {
+  return (await import('./playground')).Playground;
+});
 
 function AppRouter() {
   return (
