diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
index 134559e3b9057..af9f7826bc58e 100644
--- a/site/src/AppRouter.tsx
+++ b/site/src/AppRouter.tsx
@@ -17,49 +17,82 @@ import { SettingsPage } from "./pages/SettingsPage/SettingsPage"
 import { CreateWorkspacePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/CreateWorkspacePage"
 import { TemplatePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage"
 import { TemplatesPage } from "./pages/TemplatesPages/TemplatesPage"
-import { TerminalPage } from "./pages/TerminalPage/TerminalPage"
 import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
 import { UsersPage } from "./pages/UsersPage/UsersPage"
 import { WorkspacePage } from "./pages/WorkspacesPage/WorkspacesPage"
 
-export const AppRouter: React.FC = () => (
-  <Routes>
-    <Route path="/">
-      <Route
-        index
-        element={
-          <RequireAuth>
-            <IndexPage />
-          </RequireAuth>
-        }
-      />
-
-      <Route path="login" element={<LoginPage />} />
-      <Route path="healthz" element={<HealthzPage />} />
-      <Route
-        path="cli-auth"
-        element={
-          <RequireAuth>
-            <CliAuthenticationPage />
-          </RequireAuth>
-        }
-      />
+const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))
 
-      <Route path="templates">
+export const AppRouter: React.FC = () => (
+  <React.Suspense fallback={<></>}>
+    <Routes>
+      <Route path="/">
         <Route
           index
           element={
-            <AuthAndFrame>
-              <TemplatesPage />
-            </AuthAndFrame>
+            <RequireAuth>
+              <IndexPage />
+            </RequireAuth>
+          }
+        />
+
+        <Route path="login" element={<LoginPage />} />
+        <Route path="healthz" element={<HealthzPage />} />
+        <Route
+          path="cli-auth"
+          element={
+            <RequireAuth>
+              <CliAuthenticationPage />
+            </RequireAuth>
           }
         />
-        <Route path=":organization/:template">
+
+        <Route path="templates">
+          <Route
+            index
+            element={
+              <AuthAndFrame>
+                <TemplatesPage />
+              </AuthAndFrame>
+            }
+          />
+          <Route path=":organization/:template">
+            <Route
+              index
+              element={
+                <AuthAndFrame>
+                  <TemplatePage />
+                </AuthAndFrame>
+              }
+            />
+            <Route
+              path="create"
+              element={
+                <RequireAuth>
+                  <CreateWorkspacePage />
+                </RequireAuth>
+              }
+            />
+          </Route>
+        </Route>
+
+        <Route path="workspaces">
+          <Route
+            path=":workspace"
+            element={
+              <AuthAndFrame>
+                <WorkspacePage />
+              </AuthAndFrame>
+            }
+          />
+        </Route>
+
+        <Route path="users">
           <Route
             index
             element={
               <AuthAndFrame>
-                <TemplatePage />
+                <UsersPage />
               </AuthAndFrame>
             }
           />
@@ -67,83 +100,53 @@ export const AppRouter: React.FC = () => (
             path="create"
             element={
               <RequireAuth>
-                <CreateWorkspacePage />
+                <CreateUserPage />
               </RequireAuth>
             }
           />
         </Route>
-      </Route>
-
-      <Route path="workspaces">
         <Route
-          path=":workspace"
+          path="orgs"
           element={
             <AuthAndFrame>
-              <WorkspacePage />
+              <OrgsPage />
             </AuthAndFrame>
           }
         />
-      </Route>
-
-      <Route path="users">
         <Route
-          index
+          path="settings"
           element={
             <AuthAndFrame>
-              <UsersPage />
+              <SettingsPage />
             </AuthAndFrame>
           }
         />
-        <Route
-          path="create"
-          element={
-            <RequireAuth>
-              <CreateUserPage />
-            </RequireAuth>
-          }
-        />
-      </Route>
-      <Route
-        path="orgs"
-        element={
-          <AuthAndFrame>
-            <OrgsPage />
-          </AuthAndFrame>
-        }
-      />
-      <Route
-        path="settings"
-        element={
-          <AuthAndFrame>
-            <SettingsPage />
-          </AuthAndFrame>
-        }
-      />
 
-      <Route path="preferences" element={<PreferencesLayout />}>
-        <Route path="account" element={<AccountPage />} />
-        <Route path="security" element={<SecurityPage />} />
-        <Route path="ssh-keys" element={<SSHKeysPage />} />
-        <Route path="linked-accounts" element={<LinkedAccountsPage />} />
-      </Route>
+        <Route path="preferences" element={<PreferencesLayout />}>
+          <Route path="account" element={<AccountPage />} />
+          <Route path="security" element={<SecurityPage />} />
+          <Route path="ssh-keys" element={<SSHKeysPage />} />
+          <Route path="linked-accounts" element={<LinkedAccountsPage />} />
+        </Route>
 
-      <Route path=":username">
-        <Route path=":workspace">
-          <Route
-            path="terminal"
-            element={
-              <RequireAuth>
-                <TerminalPage />
-              </RequireAuth>
-            }
-          />
+        <Route path=":username">
+          <Route path=":workspace">
+            <Route
+              path="terminal"
+              element={
+                <RequireAuth>
+                  <TerminalPage />
+                </RequireAuth>
+              }
+            />
+          </Route>
         </Route>
-      </Route>
 
-      {/* Using path="*"" means "match anything", so this route
+        {/* Using path="*"" means "match anything", so this route
         acts like a catch-all for URLs that we don't have explicit
         routes for. */}
-      <Route path="*" element={<NotFoundPage />} />
-    </Route>
-  </Routes>
+        <Route path="*" element={<NotFoundPage />} />
+      </Route>
+    </Routes>
+  </React.Suspense>
 )
diff --git a/site/src/pages/TerminalPage/TerminalPage.test.tsx b/site/src/pages/TerminalPage/TerminalPage.test.tsx
index 270e28cc1db7a..07762ce7ba48b 100644
--- a/site/src/pages/TerminalPage/TerminalPage.test.tsx
+++ b/site/src/pages/TerminalPage/TerminalPage.test.tsx
@@ -8,7 +8,7 @@ import { TextDecoder, TextEncoder } from "util"
 import { ReconnectingPTYRequest } from "../../api/types"
 import { history, MockWorkspaceAgent, render } from "../../testHelpers"
 import { server } from "../../testHelpers/server"
-import { Language, TerminalPage } from "./TerminalPage"
+import TerminalPage, { Language } from "./TerminalPage"
 
 Object.defineProperty(window, "matchMedia", {
   writable: true,
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
index a95785ae7de66..0beaf3017d5ec 100644
--- a/site/src/pages/TerminalPage/TerminalPage.tsx
+++ b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -17,7 +17,7 @@ export const Language = {
   websocketErrorMessagePrefix: "WebSocket failed: ",
 }
 
-export const TerminalPage: React.FC<{
+const TerminalPage: React.FC<{
   readonly renderer?: XTerm.RendererType
 }> = ({ renderer }) => {
   const location = useLocation()
@@ -200,6 +200,8 @@ export const TerminalPage: React.FC<{
   )
 }
 
+export default TerminalPage
+
 const useStyles = makeStyles(() => ({
   overlay: {
     position: "absolute",
diff --git a/site/tsconfig.prod.json b/site/tsconfig.prod.json
index 26d0cc07eed64..96c01c02a8df1 100644
--- a/site/tsconfig.prod.json
+++ b/site/tsconfig.prod.json
@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["node_modules", "_jest", "**/*.stories.tsx", "**/*.test.tsx"]
+  "exclude": ["node_modules", "_jest", "**/*.stories.tsx", "**/*.test.tsx"],
+  "compilerOptions": {
+    // https://github.com/webpack/webpack/issues/5703#issuecomment-357512412
+    "module": "esnext"
+  }
 }