feat: Add code splitting to reduce bundle size (#1285)

This splits our pages to use separate JavaScript bundles. It
initially splits the terminal, which reduces our primary
bundle size by ~400KB.

We should do this for all pages, but that can come in a future
change. This leaves the loading page empty for now, which I
think is fine. None of our pages are large enough that the blank
screen temporarily would be concerning.

site/src/AppRouter.tsx

@@ -17,12 +17,14 @@ 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"
 
+const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))
+
 export const AppRouter: React.FC = () => (
+  <React.Suspense fallback={<></>}>
     <Routes>
       <Route path="/">
         <Route
@@ -146,4 +148,5 @@ export const AppRouter: React.FC = () => (
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>
+  </React.Suspense>
 )

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,

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",

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"
+  }
 }