Merge a69e351 into c5baf48

openwisp · Aug 16, 2019 · 6d4e185 · 6d4e185
2 parents c5baf48 + a69e351
commit 6d4e185
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 94 deletions.
diff --git a/client/components/organization-wrapper/organization-wrapper.js b/client/components/organization-wrapper/organization-wrapper.js
@@ -1,21 +1,22 @@
 import "./index.css";
 
 import PropTypes from "prop-types";
-import React from "react";
+import React, {Suspense, lazy} from "react";
 import {Cookies} from "react-cookie";
 import {Helmet} from "react-helmet";
 import {Redirect, Route, Switch} from "react-router-dom";
 
 import getAssetPath from "../../utils/get-asset-path";
-import ConnectedDoesNotExist from "../404";
-import DoesNotExist from "../404/404";
-import Footer from "../footer";
-import Header from "../header";
-import Login from "../login";
-import PasswordConfirm from "../password-confirm";
-import PasswordReset from "../password-reset";
-import Registration from "../registration";
-import Status from "../status";
+
+const ConnectedDoesNotExist = lazy(() => import("../404"));
+const DoesNotExist = lazy(() => import("../404/404"));
+const Footer = lazy(() => import("../footer"));
+const Header = lazy(() => import("../header"));
+const Login = lazy(() => import("../login"));
+const PasswordConfirm = lazy(() => import("../password-confirm"));
+const PasswordReset = lazy(() => import("../password-reset"));
+const Registration = lazy(() => import("../registration"));
+const Status = lazy(() => import("../status"));
 
 export default class OrganizationWrapper extends React.Component {
   constructor(props) {
@@ -41,95 +42,111 @@ export default class OrganizationWrapper extends React.Component {
     if (organization.exists === true) {
       return (
         <React.Fragment>
-          <div className="owisp-app-container">
-            <Route path={match.path} render={() => <Header />} />
-            <Switch>
-              <Route
-                path={`${match.path}`}
-                exact
-                render={() => {
-                  return <Redirect to={`/${orgSlug}/login`} />;
-                }}
-              />
-              <Route
-                path={`${match.path}/registration`}
-                render={props => {
-                  if (isAuthenticated)
-                    return <Redirect to={`/${orgSlug}/status`} />;
-                  return <Registration {...props} />;
-                }}
-              />
-              <Route
-                path={`${match.path}/password/reset/confirm/:uid/:token`}
-                render={props => {
-                  if (isAuthenticated)
-                    return <Redirect to={`/${orgSlug}/status`} />;
-                  return <PasswordConfirm {...props} />;
-                }}
-              />
-              <Route
-                path={`${match.path}/password/reset`}
-                exact
-                render={() => {
-                  if (isAuthenticated)
-                    return <Redirect to={`/${orgSlug}/status`} />;
-                  return <PasswordReset />;
-                }}
-              />
-              <Route
-                path={`${match.path}/login`}
-                render={props => {
-                  if (isAuthenticated)
-                    return <Redirect to={`/${orgSlug}/status`} />;
-                  return <Login {...props} />;
-                }}
-              />
-              <Route
-                path={`${match.path}/status`}
-                render={() => {
-                  if (isAuthenticated) return <Status cookies={cookies} />;
-                  return <Redirect to={`/${orgSlug}/login`} />;
-                }}
-              />
-              <Route
-                render={() => {
-                  return <ConnectedDoesNotExist />;
-                }}
-              />
-            </Switch>
-            <Route path={match.path} render={() => <Footer />} />
-          </div>
-          {title ? (
-            <Helmet>
-              <title>{title}</title>
-            </Helmet>
-          ) : null}
-          {cssPath && orgSlug ? (
-            <Helmet>
-              <link rel="stylesheet" href={getAssetPath(orgSlug, cssPath)} />
-            </Helmet>
-          ) : null}
-          {favicon && orgSlug ? (
-            <Helmet>
-              <link
-                rel="shortcut icon"
-                type="image/x-icon"
-                href={getAssetPath(orgSlug, favicon)}
-              />
-            </Helmet>
-          ) : null}
+          <Suspense
+            fallback={
+              <div className="owisp-loader-container">
+                <div className="owisp-loader" />
+              </div>
+            }
+          >
+            <div className="owisp-app-container">
+              <Route path={match.path} render={() => <Header />} />
+              <Switch>
+                <Route
+                  path={`${match.path}`}
+                  exact
+                  render={() => {
+                    return <Redirect to={`/${orgSlug}/login`} />;
+                  }}
+                />
+                <Route
+                  path={`${match.path}/registration`}
+                  render={props => {
+                    if (isAuthenticated)
+                      return <Redirect to={`/${orgSlug}/status`} />;
+                    return <Registration {...props} />;
+                  }}
+                />
+                <Route
+                  path={`${match.path}/password/reset/confirm/:uid/:token`}
+                  render={props => {
+                    if (isAuthenticated)
+                      return <Redirect to={`/${orgSlug}/status`} />;
+                    return <PasswordConfirm {...props} />;
+                  }}
+                />
+                <Route
+                  path={`${match.path}/password/reset`}
+                  exact
+                  render={() => {
+                    if (isAuthenticated)
+                      return <Redirect to={`/${orgSlug}/status`} />;
+                    return <PasswordReset />;
+                  }}
+                />
+                <Route
+                  path={`${match.path}/login`}
+                  render={props => {
+                    if (isAuthenticated)
+                      return <Redirect to={`/${orgSlug}/status`} />;
+                    return <Login {...props} />;
+                  }}
+                />
+                <Route
+                  path={`${match.path}/status`}
+                  render={() => {
+                    if (isAuthenticated) return <Status cookies={cookies} />;
+                    return <Redirect to={`/${orgSlug}/login`} />;
+                  }}
+                />
+                <Route
+                  render={() => {
+                    return <ConnectedDoesNotExist />;
+                  }}
+                />
+              </Switch>
+              <Route path={match.path} render={() => <Footer />} />
+            </div>
+            {title ? (
+              <Helmet>
+                <title>{title}</title>
+              </Helmet>
+            ) : null}
+            {cssPath && orgSlug ? (
+              <Helmet>
+                <link rel="stylesheet" href={getAssetPath(orgSlug, cssPath)} />
+              </Helmet>
+            ) : null}
+            {favicon && orgSlug ? (
+              <Helmet>
+                <link
+                  rel="shortcut icon"
+                  type="image/x-icon"
+                  href={getAssetPath(orgSlug, favicon)}
+                />
+              </Helmet>
+            ) : null}
+          </Suspense>
         </React.Fragment>
       );
     }
     if (organization.exists === false) {
       return (
         <React.Fragment>
-          <div className="owisp-org-wrapper-not-found">
-            <DoesNotExist />
-          </div>
-          <Helmet>
-            <title>Page not found</title>
-          </Helmet>
+          <Suspense
+            fallback={
+              <div className="owisp-loader-container">
+                <div className="owisp-loader" />
+              </div>
+            }
+          >
+            <div className="owisp-org-wrapper-not-found">
+              <DoesNotExist />
+            </div>
+            <Helmet>
+              <title>Page not found</title>
+            </Helmet>
+          </Suspense>
         </React.Fragment>
       );
     }

diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -13,7 +13,8 @@ module.exports = (env, argv) => {
       main: "./index.js",
     },
     output: {
-      filename: "[name].bundle.js",
+      filename:
+        argv.mode === "development" ? "[name].js" : "[name].[contenthash].js",
       chunkFilename: "[name].chunk.js",
       path: path.resolve(CURRENT_WORKING_DIR, "dist"),
       publicPath: "/",
@@ -79,6 +80,33 @@ module.exports = (env, argv) => {
         "/api": "http://localhost:3030",
       },
     },
+    optimization: {
+      runtimeChunk: "single",
+      splitChunks: {
+        chunks: "all",
+        minSize: 30000,
+        maxSize: 0,
+        minChunks: 1,
+        maxAsyncRequests: 5,
+        maxInitialRequests: 3,
+        automaticNameDelimiter: "~",
+        name: true,
+        cacheGroups: {
+          vendors: {
+            test: /[\\/]node_modules[\\/]/,
+            priority: -10,
+          },
+          default: {
+            minChunks: 2,
+            priority: -20,
+            reuseExistingChunk: true,
+          },
+        },
+      },
+    },
+    node: {
+      fs: "empty",
+    },
   };
   return config;
 };