Testing minimizing and code splitting

package-lock.json

@@ -370,6 +370,14 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
+    "@babel/plugin-syntax-dynamic-import": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz",
+      "integrity": "sha512-mVxuJ0YroI/h/tbFTPGZR8cv6ai+STMKNBq0f8hFxsxWjl94qqhsb+wXbpNMDPU3cfR1TIsVFzU3nXyZMqyK4w==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
     "@babel/plugin-syntax-json-strings": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz",
@@ -5685,6 +5693,14 @@
         "react-base16-styling": "^0.5.1"
       }
     },
+    "react-loadable": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.5.0.tgz",
+      "integrity": "sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==",
+      "requires": {
+        "prop-types": "^15.5.0"
+      }
+    },
     "react-markdown": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-4.0.8.tgz",

package.json

@@ -15,6 +15,7 @@
   "license": "",
   "dependencies": {
     "@babel/core": "^7.4.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.5",
@@ -29,6 +30,7 @@
     "query-string": "^6.5.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-loadable": "^5.5.0",
     "react-markdown": "^4.0.8",
     "react-redux": "^7.0.3",
     "react-router": "^5.0.0",

server/index.js

@@ -44,9 +44,9 @@ profiles.runGoldTick(connection);
 app.use('/styles', express.static(path.resolve(__dirname + '/../public/styles')) );
 app.use('/img', express.static(path.resolve(__dirname + '/../public/img')) );
 
-//the app file
-app.get('/app.bundle.js', (req, res) => {
-  res.sendFile(path.resolve(__dirname + '/../public/app.bundle.js'));
+//the app file(s)
+app.get('/*app.bundle.js', (req, res) => {
+  res.sendFile(path.resolve(`${__dirname}/../public/${req.originalUrl}`));
 });
 
 //fallback

src/components/app.jsx

@@ -1,22 +1,21 @@
 import React from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
-
-//include pages
-import Home from './pages/home.jsx';
-import Signup from './pages/signup.jsx';
-import Login from './pages/login.jsx';
-import PasswordChange from './pages/password_change.jsx';
-import PasswordRecover from './pages/password_recover.jsx';
-import PasswordReset from './pages/password_reset.jsx';
-
-import Profile from './pages/profile.jsx';
-import Ladder from './pages/ladder.jsx';
-
-import PageNotFound from './pages/page_not_found.jsx';
+import Loadable from 'react-loadable';
 
 //other stuff
 import Footer from './panels/footer.jsx';
 
+//lazy route loading
+const LazyRoute = (props) => {
+	const component = Loadable({
+		loader: props.component,
+		loading: () => <div>Loading...</div>,
+	});
+
+	return <Route {...props} component={component} />;
+};
+
+//the app class
 export default class App extends React.Component {
 	constructor(props) {
 		super(props);
@@ -29,17 +28,17 @@ export default class App extends React.Component {
 				<img className='banner' src={'/img/flag_scaled.png'} />
 				<BrowserRouter>
 					<Switch>
-						<Route exact path='/' component={Home} />
-						<Route path='/signup' component={Signup} />
-						<Route path='/login' component={Login} />
-						<Route path='/passwordchange' component={PasswordChange} />
-						<Route path='/passwordrecover' component={PasswordRecover} />
-						<Route path='/passwordreset' component={PasswordReset} />
+						<LazyRoute exact path='/' component={() => import('./pages/home.jsx')} />
+						<LazyRoute path='/signup' component={() => import('./pages/signup.jsx')} />
+						<LazyRoute path='/login' component={() => import('./pages/login.jsx')} />
+						<LazyRoute path='/passwordchange' component={() => import('./pages/password_change.jsx')} />
+						<LazyRoute path='/passwordrecover' component={() => import('./pages/password_recover.jsx')} />
+						<LazyRoute path='/passwordreset' component={() => import('./pages/password_reset.jsx')} />
 
-						<Route path='/profile' component={Profile} />
-						<Route path='/ladder' component={Ladder} />
+						<LazyRoute path='/profile' component={() => import('./pages/profile.jsx')} />
+						<LazyRoute path='/ladder' component={() => import('./pages/ladder.jsx')} />
 
-						<Route path='*' component={PageNotFound} />
+						<LazyRoute path='*' component={() => import('./pages/page_not_found.jsx')} />
 					</Switch>
 				</BrowserRouter>
 				<Footer />

webpack.config.js

@@ -1,3 +1,5 @@
+const TerserPlugin = require('terser-webpack-plugin');
+
 module.exports = {
   entry: './src/index.jsx',
   output: {
@@ -14,10 +16,23 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: ['@babel/preset-env', '@babel/preset-react']
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+            plugins: ['react-loadable/babel', '@babel/plugin-syntax-dynamic-import']
           }
         }
       }
     ]
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          output: {
+            comments: false,
+          },
+        },
+      })
+    ]
   }
 };