diff --git a/pkg/app/web/package.json b/pkg/app/web/package.json
index ba94f3a6c7..1b16ec071e 100644
--- a/pkg/app/web/package.json
+++ b/pkg/app/web/package.json
@@ -29,6 +29,7 @@
     "@testing-library/user-event": "^12.2.0",
     "@types/google-protobuf": "^3.7.2",
     "@types/jest": "^25.2.3",
+    "@types/loadable__component": "^5.13.1",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.9",
@@ -64,6 +65,7 @@
   },
   "dependencies": {
     "@date-io/dayjs": "^1.3.13",
+    "@loadable/component": "^5.14.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
diff --git a/pkg/app/web/src/pages/index.tsx b/pkg/app/web/src/pages/index.tsx
index 6dad99a6d9..fe43491cd7 100644
--- a/pkg/app/web/src/pages/index.tsx
+++ b/pkg/app/web/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import { EntityId } from "@reduxjs/toolkit";
 import React, { FC, memo, useEffect } from "react";
+import loadable from "@loadable/component";
 import { useDispatch, useSelector } from "react-redux";
 import { Route, Switch, Redirect } from "react-router-dom";
 import { Header } from "../components/header";
@@ -21,13 +22,41 @@ import { fetchEnvironments } from "../modules/environments";
 import { useMe } from "../modules/me";
 import { fetchPipeds } from "../modules/pipeds";
 import { useInterval } from "../hooks/use-interval";
-import { ApplicationDetailPage } from "./applications/detail";
 import { ApplicationIndexPage } from "./applications/index";
-import { DeploymentDetailPage } from "./deployments/detail";
 import { DeploymentIndexPage } from "./deployments/index";
-import { InsightIndexPage } from "./insight";
 import { LoginPage } from "./login";
-import { SettingsIndexPage } from "./settings";
+
+const SettingsIndexPage = loadable(
+  () => import(/* webpackChunkName: "settings" */ "./settings"),
+  {
+    resolveComponent: (components) => components.SettingsIndexPage,
+  }
+);
+
+const InsightIndexPage = loadable(
+  () => import(/* webpackChunkName: "insight" */ "./insight"),
+  {
+    resolveComponent: (components) => components.InsightIndexPage,
+  }
+);
+
+const DeploymentDetailPage = loadable(
+  () =>
+    import(/* webpackChunkName: "deployments-detail" */ "./deployments/detail"),
+  {
+    resolveComponent: (components) => components.DeploymentDetailPage,
+  }
+);
+
+const ApplicationDetailPage = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "applications-detail" */ "./applications/detail"
+    ),
+  {
+    resolveComponent: (components) => components.ApplicationDetailPage,
+  }
+);
 
 // Fetch commands detail periodically
 const FETCH_COMMANDS_INTERVAL = 3000;
diff --git a/pkg/app/web/tsconfig.json b/pkg/app/web/tsconfig.json
index db9b3d02a1..23bc308de6 100644
--- a/pkg/app/web/tsconfig.json
+++ b/pkg/app/web/tsconfig.json
@@ -5,7 +5,7 @@
     },
     "allowUnreachableCode": false,
     "baseUrl": ".",
-    "module": "CommonJS",
+    "module": "esnext",
     "moduleResolution": "node",
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
diff --git a/pkg/app/web/yarn.lock b/pkg/app/web/yarn.lock
index d723e1630e..299a4b3ebf 100644
--- a/pkg/app/web/yarn.lock
+++ b/pkg/app/web/yarn.lock
@@ -1902,7 +1902,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.6.0":
+"@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.7.7":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -2409,6 +2409,15 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@loadable/component@^5.14.1":
+  version "5.14.1"
+  resolved "https://registry.yarnpkg.com/@loadable/component/-/component-5.14.1.tgz#cacd807162430bb85ae085945318027a600adc85"
+  integrity sha512-UQBZfZrp1FLTf8RNhljXNHFNY4QhAA1L2+GOEeABBFre9TD0aFyQh3Sai5QxcOfy+FTbjIfti5iHaNRR7yUzEQ==
+  dependencies:
+    "@babel/runtime" "^7.7.7"
+    hoist-non-react-statics "^3.3.1"
+    react-is "^16.12.0"
+
 "@material-ui/core@^4.11.0":
   version "4.11.0"
   resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.0.tgz#b69b26e4553c9e53f2bfaf1053e216a0af9be15a"
@@ -3643,6 +3652,13 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
 
+"@types/loadable__component@^5.13.1":
+  version "5.13.1"
+  resolved "https://registry.yarnpkg.com/@types/loadable__component/-/loadable__component-5.13.1.tgz#97c24081676a194b29722ff6e3c24a3676984f2e"
+  integrity sha512-Zb/Qkw3BnlRoFkL6FJwDvhFhOfeotXRCWd7dHdjVLusHZ3dZjKNi3ERngYBt3tffk2NF4roGVKA/oZMA1KdbCg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/long@^4.0.0":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.1.tgz#459c65fa1867dafe6a8f322c4c51695663cc55e9"
@@ -9000,7 +9016,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==