feat: lazy loading to modals

src/components/Main.js

@@ -1,20 +1,43 @@
 import { Button, HelpButton, Logo, ZoomButtons } from './components';
 import { CameraToolbar } from './viewport';
 import { Compass32Icon } from '../icons';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import ComponentsSidebar from './components/Sidebar';
 import Events from '../lib/Events';
-import { ModalHelp } from './modals/ModalHelp';
-import ModalTextures from './modals/ModalTextures';
 import SceneGraph from './scenegraph/SceneGraph';
-import { ScreenshotModal } from './modals/ScreenshotModal';
-import TransformToolbar from './viewport/TransformToolbar';
-// import ViewportHUD from "./viewport/ViewportHUD";
 import { injectCSS } from '../lib/utils';
-import { SignInModal } from './modals/SignInModal';
-import { ProfileModal } from './modals/ProfileModal';
-import { ScenesModal } from './modals/ScenesModal';
 import { SceneEditTitle } from './components/SceneEditTitle';
+import { TransformToolbar } from './viewport/TransformToolbar';
+
+const ModalHelp = React.lazy(() =>
+  import('./modals/ModalHelp').then((module) => ({ default: module.ModalHelp }))
+);
+const ModalTextures = React.lazy(() =>
+  import('./modals/ModalTextures/ModalTextures').then((module) => ({
+    default: module.ModalTextures
+  }))
+);
+const ScreenshotModal = React.lazy(() =>
+  import('./modals/ScreenshotModal').then((module) => ({
+    default: module.ScreenshotModal
+  }))
+);
+const SignInModal = React.lazy(() =>
+  import('./modals/SignInModal').then((module) => ({
+    default: module.SignInModal
+  }))
+);
+const ProfileModal = React.lazy(() =>
+  import('./modals/ProfileModal').then((module) => ({
+    default: module.ProfileModal
+  }))
+);
+const ScenesModal = React.lazy(() =>
+  import('./modals/ScenesModal').then((module) => ({
+    default: module.ScenesModal
+  }))
+);
+
 THREE.ImageUtils.crossOrigin = '';
 // Megahack to include font-awesome.
 injectCSS(

src/components/modals/ModalTextures.js → src/components/modals/ModalTextures/ModalTextures.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Events from '../../lib/Events';
-import Modal from './Modal.jsx';
-import { insertNewAsset } from '../../lib/assetsUtils';
+import Events from '../../../lib/Events.js';
+import Modal from '../Modal.jsx';
+import { insertNewAsset } from '../../../lib/assetsUtils.js';
 
 function getFilename(url, converted = false) {
   var filename = url.split('/').pop();
@@ -29,7 +29,7 @@ function getValidId(name) {
     .toLowerCase();
 }
 
-export default class ModalTextures extends React.Component {
+class ModalTextures extends React.Component {
   static propTypes = {
     isOpen: PropTypes.bool,
     onClose: PropTypes.func,
@@ -426,3 +426,5 @@ export default class ModalTextures extends React.Component {
     );
   }
 }
+
+export { ModalTextures };

src/components/modals/ModalTextures/index.js

@@ -0,0 +1 @@
+export { ModalTextures } from './ModalTextures.js';

src/components/viewport/TransformToolbar.js

@@ -8,7 +8,7 @@ var TransformButtons = [
   { value: 'scale', icon: 'fa-expand' }
 ];
 
-export default class TransformToolbar extends React.Component {
+class TransformToolbar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -94,3 +94,5 @@ export default class TransformToolbar extends React.Component {
     );
   }
 }
+
+export { TransformToolbar };

webpack.prod.config.js

@@ -1,8 +1,6 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const Dotenv = require('dotenv-webpack');
-const TerserPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
@@ -15,10 +13,9 @@ module.exports = {
     publicPath: '/'
   },
   // optimization: {
-  //   minimizer: [new TerserPlugin(), new CssMinimizerPlugin({})]
-  //   // splitChunks: {
-  //   //   chunks: 'all'
-  //   // }
+  //   splitChunks: {
+  //     chunks: 'all'
+  //   }
   // },
   plugins: [
     new CleanWebpackPlugin(),