Trial using lazy loading imports.

src/allPages.ts

@@ -1,68 +1,46 @@
-import { HomePage } from "./pages/Home";
-import { KeyValueDeletePage } from "./pages/KeyValue/KeyValueDelete";
-import { KeyValueNewPage } from "./pages/KeyValue/KeyValueNew";
-import { KeyValueSecretEditPage } from "./pages/KeyValue/KeyValueSecretsEdit";
-import { KeyValueSecretPage } from "./pages/KeyValue/KeyValueSecret";
-import { KeyValueVersionsPage } from "./pages/KeyValue/KeyValueVersions";
-import { KeyValueViewPage } from "./pages/KeyValue/KeyValueView";
-import { LoginPage } from "./pages/Login";
-import { MePage } from "./pages/Me";
-import { NewKVEnginePage } from "./pages/NewEngines/NewKVEngine";
-import { NewSecretsEnginePage } from "./pages/NewSecretsEngine";
-import { NewTOTPEnginePage } from "./pages/NewEngines/NewTOTPEngine";
-import { NewTOTPPage } from "./pages/TOTP/NewTOTP";
-import { NewTransitEnginePage } from "./pages/NewEngines/NewTransitEngine";
-import { NewTransitKeyPage } from "./pages/Transit/NewTransitKey";
 import { Page } from "./types/Page";
-import { PwGenPage } from "./pages/PwGen";
-import { SetLanguagePage } from "./pages/SetLanguage";
-import { SetVaultURLPage } from "./pages/SetVaultURL";
-import { TOTPViewPage } from "./pages/TOTP/TOTPView";
-import { TransitDecryptPage } from "./pages/Transit/TransitDecrypt";
-import { TransitEncryptPage } from "./pages/Transit/TransitEncrypt";
-import { TransitRewrapPage } from "./pages/Transit/TransitRewrap";
-import { TransitViewPage } from "./pages/Transit/TransitView";
-import { TransitViewSecretPage } from "./pages/Transit/TransitViewSecret";
-import { UnsealPage } from "./pages/Unseal";
 import { getObjectKeys } from "./utils";
 
 /* eslint-disable */
 import { PageType } from "z-pagerouter";
 /* eslint-enable */
 
+type importType = Promise<{
+  default: { new (...args: unknown[]): Page };
+}>;
+
 type pagesList = {
-  [key: string]: Page;
+  [key: string]: importType;
 };
 
 export const allPages: pagesList = {
-  HOME: new HomePage(),
+  HOME: import("./pages/Home"),
-  ME: new MePage(),
+  ME: import("./pages/Me"),
-  TOTP: new TOTPViewPage(),
+  TOTP: import("./pages/TOTP/TOTPView"),
-  NEW_TOTP: new NewTOTPPage(),
+  NEW_TOTP: import("./pages/TOTP/NewTOTP"),
-  LOGIN: new LoginPage(),
+  LOGIN: import("./pages/Login"),
-  SET_VAULT_URL: new SetVaultURLPage(),
+  SET_VAULT_URL: import("./pages/SetVaultURL"),
-  UNSEAL: new UnsealPage(),
+  UNSEAL: import("./pages/Unseal"),
-  SET_LANGUAGE: new SetLanguagePage(),
+  SET_LANGUAGE: import("./pages/SetLanguage"),
-  TRANSIT_NEW_KEY: new NewTransitKeyPage(),
+  TRANSIT_NEW_KEY: import("./pages/Transit/NewTransitKey"),
-  TRANSIT_VIEW: new TransitViewPage(),
+  TRANSIT_VIEW: import("./pages/Transit/TransitView"),
-  TRANSIT_VIEW_SECRET: new TransitViewSecretPage(),
+  TRANSIT_VIEW_SECRET: import("./pages/Transit/TransitViewSecret"),
-  TRANSIT_ENCRYPT: new TransitEncryptPage(),
+  TRANSIT_ENCRYPT: import("./pages/Transit/TransitEncrypt"),
-  TRANSIT_DECRYPT: new TransitDecryptPage(),
+  TRANSIT_DECRYPT: import("./pages/Transit/TransitDecrypt"),
-  TRANSIT_REWRAP: new TransitRewrapPage(),
+  TRANSIT_REWRAP: import("./pages/Transit/TransitRewrap"),
-  KEY_VALUE_VIEW: new KeyValueViewPage(),
+  KEY_VALUE_VIEW: import("./pages/KeyValue/KeyValueView"),
-  KEY_VALUE_SECRET: new KeyValueSecretPage(),
+  KEY_VALUE_SECRET: import("./pages/KeyValue/KeyValueSecret"),
-  KEY_VALUE_VERSIONS: new KeyValueVersionsPage(),
+  KEY_VALUE_VERSIONS: import("./pages/KeyValue/KeyValueVersions"),
-  KEY_VALUE_NEW_SECRET: new KeyValueNewPage(),
+  KEY_VALUE_NEW_SECRET: import("./pages/KeyValue/KeyValueNew"),
-  KEY_VALUE_DELETE: new KeyValueDeletePage(),
+  KEY_VALUE_DELETE: import("./pages/KeyValue/KeyValueDelete"),
-  KEY_VALUE_SECRET_EDIT: new KeyValueSecretEditPage(),
+  KEY_VALUE_SECRET_EDIT: import("./pages/KeyValue/KeyValueSecretsEdit"),
-  PW_GEN: new PwGenPage(),
+  PW_GEN: import("./pages/PwGen"),
-  NEW_SECRETS_ENGINE: new NewSecretsEnginePage(),
+  NEW_SECRETS_ENGINE: import("./pages/NewSecretsEngine"),
-  NEW_KV_ENGINE: new NewKVEnginePage(),
+  NEW_KV_ENGINE: import("./pages/NewEngines/NewKVEngine"),
-  NEW_TOTP_ENGINE: new NewTOTPEnginePage(),
+  NEW_TOTP_ENGINE: import("./pages/NewEngines/NewTOTPEngine"),
-  NEW_TRANSIT_ENGINE: new NewTransitEnginePage(),
+  NEW_TRANSIT_ENGINE: import("./pages/NewEngines/NewTransitEngine"),
 };
 
-
 // This should implement all o PageListType
 class PageList {
   constructor(pages: pagesList) {
@@ -74,7 +52,7 @@ class PageList {
     return getObjectKeys(this.pages);
   }
   async getPage(pageID: string): Promise<PageType> {
-    return this.pages[pageID];
+    return new (await this.pages[pageID]).default();
   }
 }
 

src/pages/Home.ts

@@ -134,3 +134,5 @@ export class HomePage extends Page {
     return i18next.t("home_page_title");
   }
 }
+
+export { HomePage as default };

src/pages/KeyValue/KeyValueDelete.ts

@@ -55,3 +55,5 @@ export class KeyValueDeletePage extends Page {
     return i18next.t("kv_delete_title");
   }
 }
+
+export { KeyValueDeletePage as default };

src/pages/KeyValue/KeyValueNew.ts

@@ -90,3 +90,4 @@ export class KeyValueNewPage extends Page {
     return i18next.t("kv_new_title");
   }
 }
+export { KeyValueNewPage as default };

src/pages/KeyValue/KeyValueSecret.ts

@@ -186,3 +186,5 @@ export class KeyValueSecretPage extends Page {
     return i18next.t("kv_secret_title");
   }
 }
+
+export { KeyValueSecretPage as default };

src/pages/KeyValue/KeyValueSecretsEdit.ts

@@ -87,3 +87,4 @@ export class KeyValueSecretEditPage extends Page {
     return i18next.t("kv_sec_edit_title");
   }
 }
+export { KeyValueSecretEditPage as default };

src/pages/KeyValue/KeyValueVersions.ts

@@ -54,3 +54,5 @@ export class KeyValueVersionsPage extends Page {
     return i18next.t("kv_sec_versions_title");
   }
 }
+
+export { KeyValueVersionsPage as default };

src/pages/KeyValue/KeyValueView.ts

@@ -104,3 +104,5 @@ export class KeyValueViewPage extends Page {
     return i18next.t("kv_view_title");
   }
 }
+
+export { KeyValueViewPage as default };

src/pages/Login.ts

@@ -174,3 +174,5 @@ export class LoginPage extends Page {
     return i18next.t("log_in_title");
   }
 }
+
+export { LoginPage as default };

src/pages/Me.ts

@@ -98,3 +98,5 @@ export class MePage extends Page {
     return i18next.t("me_page_title");
   }
 }
+
+export { MePage as default };

src/pages/NewEngines/NewKVEngine.ts

@@ -85,3 +85,5 @@ export class NewKVEnginePage extends Page {
     return i18next.t("new_kv_engine_title");
   }
 }
+
+export { NewKVEnginePage as default };

src/pages/NewEngines/NewTOTPEngine.ts

@@ -67,3 +67,5 @@ export class NewTOTPEnginePage extends Page {
     return i18next.t("new_totp_engine_title");
   }
 }
+
+export { NewTOTPEnginePage as default };

src/pages/NewEngines/NewTransitEngine.ts

@@ -67,3 +67,5 @@ export class NewTransitEnginePage extends Page {
     return i18next.t("new_transit_engine_title");
   }
 }
+
+export { NewTransitEnginePage as default };

src/pages/NewSecretsEngine.ts

@@ -45,3 +45,5 @@ export class NewSecretsEnginePage extends Page {
     return i18next.t("new_secrets_engine_title");
   }
 }
+
+export { NewSecretsEnginePage as default };

src/pages/PwGen.ts

@@ -146,3 +146,5 @@ export class PwGenPage extends Page {
     return i18next.t("password_generator_title");
   }
 }
+
+export { PwGenPage as default };

src/pages/SetLanguage.ts

@@ -67,3 +67,5 @@ export class SetLanguagePage extends Page {
     return i18next.t("set_language_title");
   }
 }
+
+export { SetLanguagePage as default };

src/pages/SetVaultURL.ts

@@ -52,3 +52,5 @@ export class SetVaultURLPage extends Page {
     return "Set Vault URL";
   }
 }
+
+export { SetVaultURLPage as default };

src/pages/TOTP/NewTOTP.ts

@@ -114,3 +114,5 @@ export class NewTOTPPage extends Page {
     return i18next.t("totp_new_title");
   }
 }
+
+export { NewTOTPPage as default };

src/pages/TOTP/TOTPView.ts

@@ -113,3 +113,5 @@ export class TOTPViewPage extends Page {
     return i18next.t("totp_view_title");
   }
 }
+
+export { TOTPViewPage as default };

src/pages/Transit/NewTransitKey.ts

@@ -95,3 +95,5 @@ export class NewTransitKeyPage extends Page {
     return i18next.t("transit_new_key_title");
   }
 }
+
+export { NewTransitKeyPage as default };

src/pages/Transit/TransitDecrypt.ts

@@ -122,3 +122,5 @@ export class TransitDecryptPage extends Page {
     return i18next.t("transit_decrypt_title");
   }
 }
+
+export { TransitDecryptPage as default };

src/pages/Transit/TransitEncrypt.ts

@@ -120,3 +120,5 @@ export class TransitEncryptPage extends Page {
     return i18next.t("transit_encrypt_title");
   }
 }
+
+export { TransitEncryptPage as default };

src/pages/Transit/TransitRewrap.ts

@@ -113,3 +113,5 @@ export class TransitRewrapPage extends Page {
     return i18next.t("transit_rewrap_title");
   }
 }
+
+export { TransitRewrapPage as default };

src/pages/Transit/TransitView.ts

@@ -78,3 +78,5 @@ export class TransitViewPage extends Page {
     return i18next.t("transit_view_title");
   }
 }
+
+export { TransitViewPage as default };

src/pages/Transit/TransitViewSecret.ts

@@ -66,3 +66,5 @@ export class TransitViewSecretPage extends Page {
     return i18next.t("transit_view_secret_title");
   }
 }
+
+export { TransitViewSecretPage as default };

src/pages/Unseal.ts

@@ -192,3 +192,5 @@ export class UnsealPage extends Page {
     return i18next.t("unseal_vault_text");
   }
 }
+
+export { UnsealPage as default };

tsconfig.json

@@ -3,7 +3,7 @@
     "outDir": "./dist/",
     "noImplicitAny": false,
     "allowSyntheticDefaultImports": true,
-    "module": "es6",
+    "module": "es2020",
     "target": "es2019",
     "strictBindCallApply": true,
     "noImplicitThis": true,

webpack.config.js

@@ -22,7 +22,8 @@ module.exports = {
   entry: './src/main.ts',
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: 'bundle.js',
+    chunkFilename: '[name].js',
+    filename: '[name].[contenthash].js',
   },
   stats: {
     preset: VERBOSE ? "detailed" : "normal",
@@ -44,7 +45,11 @@ module.exports = {
     modules: ['node_modules'],
     extensions: ['.tsx', '.ts', '.js', ".mjs"],
   },
-
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+    },
+  },
   module: {
     rules: [
       {