From 673c3f989edf7daaac7b9358a686f8da9750c368 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Mon, 4 Nov 2019 14:34:27 +0100
Subject: [PATCH] Code splitting and lazy loading for faster load times.

---
 app/src/RoomClient.js                  | 91 +++++++++++++++++++++++---
 app/src/components/App.js              | 18 ++++-
 app/src/components/ReactLazyPreload.js | 10 +++
 3 files changed, 107 insertions(+), 12 deletions(-)
 create mode 100644 app/src/components/ReactLazyPreload.js

diff --git a/app/src/RoomClient.js b/app/src/RoomClient.js
index 747bb33..7cbb58c 100644
--- a/app/src/RoomClient.js
+++ b/app/src/RoomClient.js
@@ -1,15 +1,30 @@
-import io from 'socket.io-client';
-import * as mediasoupClient from 'mediasoup-client';
-import WebTorrent from 'webtorrent';
-import createTorrent from 'create-torrent';
-import saveAs from 'file-saver';
+// import io from 'socket.io-client';
+// import * as mediasoupClient from 'mediasoup-client';
+// import WebTorrent from 'webtorrent';
+// import createTorrent from 'create-torrent';
+// import saveAs from 'file-saver';
 import Logger from './Logger';
 import hark from 'hark';
-import ScreenShare from './ScreenShare';
-import Spotlights from './Spotlights';
+// import ScreenShare from './ScreenShare';
+// import Spotlights from './Spotlights';
 import { getSignalingUrl } from './urlFactory';
 import * as requestActions from './actions/requestActions';
 import * as stateActions from './actions/stateActions';
+
+let WebTorrent;
+
+let createTorrent;
+
+let saveAs;
+
+let mediasoupClient;
+
+let io;
+
+let ScreenShare;
+
+let Spotlights;
+
 const {
 	turnServers,
 	requestTimeout,
@@ -98,7 +113,7 @@ export default class RoomClient
 		this._forceTcp = forceTcp;
 
 		// Torrent support
-		this._torrentSupport = WebTorrent.WEBRTC_SUPPORT;
+		this._torrentSupport = null;
 
 		// Whether simulcast should be used.
 		this._useSimulcast = useSimulcast;
@@ -171,7 +186,7 @@ export default class RoomClient
 		// @type {Map<String, mediasoupClient.Consumer>}
 		this._consumers = new Map();
 
-		this._screenSharing = ScreenShare.create(device);
+		this._screenSharing = null;
 
 		this._screenSharingProducer = null;
 
@@ -1130,8 +1145,66 @@ export default class RoomClient
 			stateActions.setMyRaiseHandStateInProgress(false));
 	}
 
+	async _loadDynamicImports()
+	{
+		({ default: WebTorrent } = await import(
+
+			/* webpackPrefetch: true */
+			/* webpackChunkName: "webtorrent" */
+			'webtorrent'
+		));
+
+		({ default: createTorrent } = await import(
+
+			/* webpackPrefetch: true */
+			/* webpackChunkName: "create-torrent" */
+			'create-torrent'
+		));
+
+		({ default: saveAs } = await import(
+
+			/* webpackPrefetch: true */
+			/* webpackChunkName: "file-saver" */
+			'file-saver'
+		));
+
+		({ default: ScreenShare } = await import(
+
+			/* webpackPrefetch: true */
+			/* webpackChunkName: "screensharing" */
+			'./ScreenShare'
+		));
+
+		({ default: Spotlights } = await import(
+
+			/* webpackPrefetch: true */
+			/* webpackChunkName: "spotlights" */
+			'./Spotlights'
+		));
+
+		mediasoupClient = await import(
+
+			/* webpackPrefetch: true */
+			/* webpackChunkName: "mediasoup" */
+			'mediasoup-client'
+		);
+
+		({ default: io } = await import(
+
+			/* webpackPrefetch: true */
+			/* webpackChunkName: "socket.io" */
+			'socket.io-client'
+		));
+	}
+
 	async join({ joinVideo })
 	{
+		await this._loadDynamicImports();
+
+		this._torrentSupport = WebTorrent.WEBRTC_SUPPORT;
+
+		this._screenSharing = ScreenShare.create(this._device);
+
 		this._signalingSocket = io(this._signalingUrl);
 
 		this._spotlights = new Spotlights(this._maxSpotlights, this._signalingSocket);
diff --git a/app/src/components/App.js b/app/src/components/App.js
index 130faa8..e02aff7 100644
--- a/app/src/components/App.js
+++ b/app/src/components/App.js
@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { useEffect, Suspense } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import Room from './Room';
 import JoinDialog from './JoinDialog';
+import LoadingView from './LoadingView';
+import { ReactLazyPreload } from './ReactLazyPreload';
+
+const Room = ReactLazyPreload(() => import(/* webpackChunkName: "room" */ './Room'));
 
 const App = (props) =>
 {
@@ -10,6 +13,13 @@ const App = (props) =>
 		room
 	} = props;
 
+	useEffect(() =>
+	{
+		Room.preload();
+
+		return;
+	}, []);
+
 	if (!room.joined)
 	{
 		return (
@@ -19,7 +29,9 @@ const App = (props) =>
 	else
 	{
 		return (
-			<Room />
+			<Suspense fallback={<LoadingView />}>
+				<Room />
+			</Suspense>
 		);
 	}
 };
diff --git a/app/src/components/ReactLazyPreload.js b/app/src/components/ReactLazyPreload.js
new file mode 100644
index 0000000..4f43c1f
--- /dev/null
+++ b/app/src/components/ReactLazyPreload.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const ReactLazyPreload = (importStatement) =>
+{
+	const Component = React.lazy(importStatement);
+
+	Component.preload = importStatement;
+
+	return Component;
+};
\ No newline at end of file