32. Code Split

app/index.js

@@ -1,12 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
-import Popular from './components/Popular'
-import Battle from './components/Battle'
-import Results from './components/Results'
 import { ThemeProvider } from './contexts/theme'
 import Nav from './components/Nav'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+import Loading from './components/Loading'
+
+const Popular = React.lazy(() => import('./components/Popular'))
+const Battle = React.lazy(() => import('./components/Battle'))
+const Results = React.lazy(() => import('./components/Results'))
 
 class App extends React.Component {
   state = {
@@ -25,12 +27,14 @@ class App extends React.Component {
             <div className='container'>
               <Nav />
 
-              <Switch>
-                <Route exact path='/' component={Popular} />
-                <Route exact path='/battle' component={Battle} />
-                <Route path='/battle/results' component={Results} />
-                <Route render={() => <h1>404</h1>} />
-              </Switch>
+              <React.Suspense fallback={<Loading />} >
+                <Switch>
+                  <Route exact path='/' component={Popular} />
+                  <Route exact path='/battle' component={Battle} />
+                  <Route path='/battle/results' component={Results} />
+                  <Route render={() => <h1>404</h1>} />
+                </Switch>
+              </React.Suspense>
             </div>
           </div>
         </ThemeProvider>

package.json

@@ -4,15 +4,17 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server"
+    "start": "webpack-dev-server",
+    "build": "webpack"
   },
   "babel": {
     "presets": [
       "@babel/preset-env",
       "@babel/preset-react"
     ],
     "plugins": [
-      "@babel/plugin-proposal-class-properties"
+      "@babel/plugin-proposal-class-properties",
+      "syntax-dynamic-import"
     ]
   },
   "keywords": [],
@@ -32,6 +34,7 @@
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.5",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "css-loader": "^2.1.1",
     "html-webpack-plugin": "^3.2.0",
     "style-loader": "^0.23.1",