fix: Add some code splitting for PWA build (#937)

* fix: Add some code splitting for PWA build

* Fix missing files

extensions/vtk/.webpack/webpack.prod.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const merge = require('webpack-merge');
 const path = require('path');
 const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
@@ -34,5 +35,10 @@ module.exports = (env, argv) => {
       libraryExport: 'default',
       filename: pkg.main,
     },
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    ],
   });
 };

extensions/vtk/src/asyncComponent.js

@@ -0,0 +1,37 @@
+/**
+ * We use this component to leverage "Code Splitting"
+ *
+ * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
+ */
+
+import React, { Component } from 'react';
+
+export default function asyncComponent(importComponent) {
+  class AsyncComponent extends Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        component: null,
+      };
+    }
+
+    async componentDidMount() {
+      // Add dynamically loaded component to state
+      const { default: component } = await importComponent();
+
+      this.setState({
+        component: component,
+      });
+    }
+
+    render() {
+      const C = this.state.component;
+
+      // Render the loaded component, or null
+      return C ? <C {...this.props} /> : null;
+    }
+  }
+
+  return AsyncComponent;
+}

extensions/vtk/src/index.js

@@ -1,9 +1,13 @@
-import OHIFVTKViewport from './OHIFVTKViewport.js';
+import asyncComponent from './asyncComponent.js';
 import commandsModule from './commandsModule.js';
 import toolbarModule from './toolbarModule.js';
 // This feels weird
 // import loadLocales from './loadLocales';
 
+const OHIFVTKViewport = asyncComponent(() =>
+  import(/* webpackChunkName: "OHIFVTKViewport" */ './OHIFVTKViewport.js')
+);
+
 const vtkExtension = {
   /**
    * Only required property. Should be a unique value across all extensions.