Feature: Add Code Splitting

package.json

@@ -7,6 +7,7 @@
     "markdown-it": "8.4.2",
     "react": "16.5.2",
     "react-dom": "16.5.2",
+    "react-loadable": "^5.5.0",
     "react-textarea-autosize": "7.0.4",
     "react-toastify": "4.4.0",
     "semantic-ui-css": "2.4.0",
@@ -22,6 +23,7 @@
     "@types/puppeteer": "1.9.0",
     "@types/react": "16.4.16",
     "@types/react-dom": "16.0.9",
+    "@types/react-loadable": "^5.4.1",
     "@types/react-textarea-autosize": "4.3.3",
     "css-loader": "1.0.0",
     "dotenv": "6.1.0",

public/AsyncPages.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import Loadable from "react-loadable";
+
+import { Loader } from "@fider/components/common/Loader";
+
+export const AsyncHomePage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/Home/Home.page");
+    return module.HomePage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncShowPostPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/ShowPost/ShowPost.page");
+    return module.ShowPostPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncManageMembersPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/Administration/pages/ManageMembers.page");
+    return module.ManageMembersPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncManageTagsPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/Administration/pages/ManageTags.page");
+    return module.ManageTagsPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncPrivacySettingsPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/Administration/pages/PrivacySettings.page");
+    return module.PrivacySettingsPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncExportPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/Administration/pages/Export.page");
+    return module.ExportPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncInvitationsPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/Administration/pages/Invitations.page");
+    return module.InvitationsPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncManageAuthenticationPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/Administration/pages/ManageAuthentication.page");
+    return module.ManageAuthenticationPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncAdvancedSettingsPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/Administration/pages/AdvancedSettings.page");
+    return module.AdvancedSettingsPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncGeneralSettingsPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/Administration/pages/GeneralSettings.page");
+    return module.GeneralSettingsPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncSignInPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/SignIn/SignIn.page");
+    return module.SignInPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncSignUpPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/SignUp/SignUp.page");
+    return module.SignUpPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncCompleteSignInProfilePage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/CompleteSignInProfile/CompleteSignInProfile.page");
+    return module.CompleteSignInProfilePage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncMyNotificationsPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/MyNotifications/MyNotifications.page");
+    return module.MyNotificationsPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncMySettingsPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/MySettings/MySettings.page");
+    return module.MySettingsPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncOAuthEchoPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/OAuthEcho/OAuthEcho.page");
+    return module.OAuthEchoPage;
+  },
+  loading: () => <Loader />
+});
+
+export const AsyncUIToolkitPage = Loadable({
+  loader: async () => {
+    const module = await import("@fider/pages/UI/UIToolkit.page");
+    return module.UIToolkitPage;
+  },
+  loading: () => <Loader />
+});

public/components/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ErrorPage } from "@fider/pages";
+import { ErrorPage } from "@fider/pages/Error/Error.page";
 
 interface ErrorBoundaryProps {
   onError?: (err: Error) => void;

public/index.tsx

@@ -1,3 +1,8 @@
+const fider = Fider.initialize();
+
+__webpack_nonce__ = Fider.session.contextID;
+__webpack_public_path__ = Fider.settings.globalAssetsURL || "/assets/";
+
 import React from "react";
 import ReactDOM from "react-dom";
 import { resolveRootComponent } from "@fider/router";
@@ -26,8 +31,6 @@ window.addEventListener("error", (evt: ErrorEvent) => {
 });
 
 document.addEventListener("DOMContentLoaded", () => {
-  const fider = Fider.initialize();
-
   const root = document.getElementById("root");
   if (root) {
     const config = resolveRootComponent(location.pathname);

public/pages/Home/components/PostFilter.tsx

@@ -1,10 +1,10 @@
+import "./PostFilter.scss";
+
 import React from "react";
 import { PostStatus } from "@fider/models";
 import { DropDown, DropDownItem } from "@fider/components";
 import { Fider } from "@fider/services";
 
-import "./PostFilter.scss";
-
 interface PostFilterProps {
   activeView: string;
   countPerStatus: { [key: string]: number };

public/pages/Home/components/TagsFilter.tsx

@@ -1,10 +1,10 @@
+import "./TagsFilter.scss";
+
 import React from "react";
 import { Tag } from "@fider/models";
 import { ShowTag } from "@fider/components/ShowTag";
 import { DropDown, DropDownItem } from "@fider/components";
 
-import "./TagsFilter.scss";
-
 interface TagsFilterProps {
   tags: Tag[];
   defaultSelection: string[];

public/router.spec.tsx

@@ -1,14 +1,14 @@
 import { resolveRootComponent } from "./router";
-import { HomePage, ShowPostPage, InvitationsPage, GeneralSettingsPage, OAuthEchoPage } from "@fider/pages";
+import * as Pages from "@fider/AsyncPages";
 
 [
-  { path: "", expected: HomePage },
-  { path: "/posts/123", expected: ShowPostPage },
-  { path: "/posts/123/the-slug", expected: ShowPostPage },
+  { path: "", expected: Pages.AsyncHomePage },
+  { path: "/posts/123", expected: Pages.AsyncShowPostPage },
+  { path: "/posts/123/the-slug", expected: Pages.AsyncShowPostPage },
   { path: "/posts" },
-  { path: "/admin", expected: GeneralSettingsPage },
-  { path: "/admin/invitations", expected: InvitationsPage },
-  { path: "/oauth/_name/echo", expected: OAuthEchoPage }
+  { path: "/admin", expected: Pages.AsyncGeneralSettingsPage },
+  { path: "/admin/invitations", expected: Pages.AsyncInvitationsPage },
+  { path: "/oauth/_name/echo", expected: Pages.AsyncOAuthEchoPage }
 ].forEach(x => {
   test(`Router should resolve correct component for path '${x.path}'`, () => {
     if (x.expected) {

public/router.tsx

@@ -1,24 +1,6 @@
 import React from "react";
 
-import {
-  HomePage,
-  SignInPage,
-  SignUpPage,
-  ManageMembersPage,
-  CompleteSignInProfilePage,
-  PrivacySettingsPage,
-  InvitationsPage,
-  ExportPage,
-  GeneralSettingsPage,
-  AdvancedSettingsPage,
-  ManageAuthenticationPage,
-  ManageTagsPage,
-  OAuthEchoPage,
-  ShowPostPage,
-  MySettingsPage,
-  MyNotificationsPage,
-  UIToolkitPage
-} from "@fider/pages";
+import * as Pages from "@fider/AsyncPages";
 
 interface PageConfiguration {
   regex: RegExp;
@@ -38,32 +20,32 @@ const route = (path: string, component: any, showHeader: boolean = true): PageCo
 };
 
 const pathRegex = [
-  route("", HomePage),
-  route("/posts/:number*", ShowPostPage),
-  route("/admin/members", ManageMembersPage),
-  route("/admin/tags", ManageTagsPage),
-  route("/admin/privacy", PrivacySettingsPage),
-  route("/admin/export", ExportPage),
-  route("/admin/invitations", InvitationsPage),
-  route("/admin/authentication", ManageAuthenticationPage),
-  route("/admin/advanced", AdvancedSettingsPage),
-  route("/admin", GeneralSettingsPage),
-  route("/signin", SignInPage, false),
-  route("/signup", SignUpPage, false),
-  route("/signin/verify", CompleteSignInProfilePage),
-  route("/invite/verify", CompleteSignInProfilePage),
-  route("/notifications", MyNotificationsPage),
-  route("/settings", MySettingsPage),
-  route("/oauth/:string/echo", OAuthEchoPage, false),
-  route("/-/ui", UIToolkitPage)
+  route("", Pages.AsyncHomePage),
+  route("/posts/:number*", Pages.AsyncShowPostPage),
+  route("/admin/members", Pages.AsyncManageMembersPage),
+  route("/admin/tags", Pages.AsyncManageTagsPage),
+  route("/admin/privacy", Pages.AsyncPrivacySettingsPage),
+  route("/admin/export", Pages.AsyncExportPage),
+  route("/admin/invitations", Pages.AsyncInvitationsPage),
+  route("/admin/authentication", Pages.AsyncManageAuthenticationPage),
+  route("/admin/advanced", Pages.AsyncAdvancedSettingsPage),
+  route("/admin", Pages.AsyncGeneralSettingsPage),
+  route("/signin", Pages.AsyncSignInPage, false),
+  route("/signup", Pages.AsyncSignUpPage, false),
+  route("/signin/verify", Pages.AsyncCompleteSignInProfilePage),
+  route("/invite/verify", Pages.AsyncCompleteSignInProfilePage),
+  route("/notifications", Pages.AsyncMyNotificationsPage),
+  route("/settings", Pages.AsyncMySettingsPage),
+  route("/oauth/:string/echo", Pages.AsyncOAuthEchoPage, false),
+  route("/-/ui", Pages.AsyncUIToolkitPage)
 ];
 
 export const resolveRootComponent = (path: string): PageConfiguration => {
   if (path.length > 0 && path.charAt(path.length - 1) === "/") {
     path = path.substring(0, path.length - 1);
   }
   for (const entry of pathRegex) {
-    if (entry.regex.test(path)) {
+    if (entry && entry.regex.test(path)) {
       return entry;
     }
   }

public/tsd.d.ts

@@ -10,6 +10,9 @@ declare global {
     __tenant: Tenant;
     __settings: SystemSettings;
   }
+
+  var __webpack_nonce__: string; // tslint:disable-line
+  var __webpack_public_path__:string; // tslint:disable-line
 }
 
 declare var require: (id: string) => any;