chore: Improve bundle size (#5761)

BrunoQuaresma · web-flow · commit 2117eb4f3175 · 2023-01-18T17:31:31.000Z
diff --git a/.gitignore b/.gitignore
@@ -36,6 +36,9 @@ cli/testdata/.gen-golden
 /dist/
 site/out/
 
+# Bundle analysis
+site/stats/
+
 *.tfstate
 *.tfstate.backup
 *.tfplan
diff --git a/.prettierignore b/.prettierignore
@@ -39,6 +39,9 @@ cli/testdata/.gen-golden
 /dist/
 site/out/
 
+# Bundle analysis
+site/stats/
+
 *.tfstate
 *.tfstate.backup
 *.tfplan
diff --git a/site/.eslintignore b/site/.eslintignore
@@ -39,6 +39,9 @@ playwright-report/*
 ../dist/
 out/
 
+# Bundle analysis
+stats/
+
 *.tfstate
 *.tfstate.backup
 *.tfplan
diff --git a/site/.prettierignore b/site/.prettierignore
@@ -39,6 +39,9 @@ playwright-report/*
 ../dist/
 out/
 
+# Bundle analysis
+stats/
+
 *.tfstate
 *.tfstate.backup
 *.tfplan
diff --git a/site/jest.setup.ts b/site/jest.setup.ts
@@ -1,7 +1,6 @@
 import "@testing-library/jest-dom"
 import { cleanup } from "@testing-library/react"
 import crypto from "crypto"
-import * as util from "util"
 import { server } from "./src/testHelpers/server"
 import "jest-location-mock"
 
@@ -32,27 +31,5 @@ afterEach(() => {
 // Clean up after the tests are finished.
 afterAll(() => server.close())
 
-// Helper utility to fail jest tests if a console.error is logged
-// Pulled from this blog post:
-// https://www.benmvp.com/blog/catch-warnings-jest-tests/
-
-// For now, I limited this to just 'error' - but failing on warnings
-// would be a nice next step! We may need to filter out some noise
-// from material-ui though.
-const CONSOLE_FAIL_TYPES = ["error" /* 'warn' */] as const
-
-// Throw errors when a `console.error` or `console.warn` happens
-// by overriding the functions
-CONSOLE_FAIL_TYPES.forEach((logType: typeof CONSOLE_FAIL_TYPES[number]) => {
-  global.console[logType] = <Type>(format: string, ...args: Type[]): void => {
-    throw new Error(
-      `Failing due to console.${logType} while running test!\n\n${util.format(
-        format,
-        ...args,
-      )}`,
-    )
-  }
-})
-
 // This is needed because we are compiling under `--isolatedModules`
 export {}
diff --git a/site/package.json b/site/package.json
@@ -24,6 +24,7 @@
     "test:coverage": "jest --selectProjects test --collectCoverage",
     "test:watch": "jest --selectProjects test --watch",
     "typegen": "xstate typegen 'src/**/*.ts'",
+    "stats": "STATS=true yarn build && npx http-server ./stats -p 8081 -c-1",
     "deadcode": "ts-prune | grep -v \".stories\\|.typegen\\|.config\\|e2e\\|__mocks__\\|used in module\\|testHelpers\\|typesGenerated\" || echo \"No deadcode found.\""
   },
   "dependencies": {
@@ -58,6 +59,7 @@
     "jest-location-mock": "1.0.9",
     "js-untar": "2.0.0",
     "just-debounce-it": "3.1.1",
+    "lodash": "4.17.21",
     "playwright": "^1.29.2",
     "react": "18.2.0",
     "react-chartjs-2": "4.3.1",
@@ -69,6 +71,7 @@
     "react-router-dom": "6.4.1",
     "react-syntax-highlighter": "15.5.0",
     "remark-gfm": "3.0.1",
+    "rollup-plugin-visualizer": "5.9.0",
     "sourcemapped-stacktrace": "1.1.11",
     "ts-prune": "0.10.3",
     "tzdata": "1.0.30",
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
@@ -1,18 +1,17 @@
 import Button from "@material-ui/core/Button"
 import InputAdornment from "@material-ui/core/InputAdornment"
 import Popover from "@material-ui/core/Popover"
-import TextField, { TextFieldProps } from "@material-ui/core/TextField"
+import TextField from "@material-ui/core/TextField"
 import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
 import { useRef, FC, useState } from "react"
 import Picker from "@emoji-mart/react"
 import { makeStyles } from "@material-ui/core/styles"
 import { colors } from "theme/colors"
 import { useTranslation } from "react-i18next"
 import data from "@emoji-mart/data/sets/14/twitter.json"
+import { IconFieldProps } from "./types"
 
-export const IconField: FC<
-  TextFieldProps & { onPickEmoji: (value: string) => void }
-> = ({ onPickEmoji, ...textFieldProps }) => {
+const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
   if (
     typeof textFieldProps.value !== "string" &&
     typeof textFieldProps.value !== "undefined"
@@ -111,3 +110,5 @@ const useStyles = makeStyles((theme) => ({
     paddingBottom: theme.spacing(0.5),
   },
 }))
+
+export default IconField
diff --git a/site/src/components/IconField/LazyIconField.tsx b/site/src/components/IconField/LazyIconField.tsx
@@ -0,0 +1,12 @@
+import { lazy, FC, Suspense } from "react"
+import { IconFieldProps } from "./types"
+
+const IconField = lazy(() => import("./IconField"))
+
+export const LazyIconField: FC<IconFieldProps> = (props) => {
+  return (
+    <Suspense>
+      <IconField {...props} />
+    </Suspense>
+  )
+}
diff --git a/site/src/components/IconField/types.ts b/site/src/components/IconField/types.ts
@@ -0,0 +1,5 @@
+import { TextFieldProps } from "@material-ui/core/TextField"
+
+export type IconFieldProps = TextFieldProps & {
+  onPickEmoji: (value: string) => void
+}
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -7,7 +7,6 @@ import {
   TemplateExample,
 } from "api/typesGenerated"
 import { FormFooter } from "components/FormFooter/FormFooter"
-import { IconField } from "components/IconField/IconField"
 import { ParameterInput } from "components/ParameterInput/ParameterInput"
 import { Stack } from "components/Stack/Stack"
 import {
@@ -23,6 +22,7 @@ import { CreateTemplateData } from "xServices/createTemplate/createTemplateXServ
 import * as Yup from "yup"
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
 import { HelpTooltip, HelpTooltipText } from "components/Tooltips/HelpTooltip"
+import { LazyIconField } from "components/IconField/LazyIconField"
 
 const validationSchema = Yup.object({
   name: nameValidator("Name"),
@@ -154,7 +154,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
               variant="outlined"
             />
 
-            <IconField
+            <LazyIconField
               {...getFieldHelpers("icon")}
               disabled={isSubmitting}
               onChange={onChangeTrimmed(form)}
diff --git a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
@@ -1,21 +1,14 @@
-import data from "@emoji-mart/data/sets/14/twitter.json"
-import Picker from "@emoji-mart/react"
-import Button from "@material-ui/core/Button"
-import InputAdornment from "@material-ui/core/InputAdornment"
-import Popover from "@material-ui/core/Popover"
-import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import { Group } from "api/typesGenerated"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
-import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
 import { FormFooter } from "components/FormFooter/FormFooter"
 import { FullPageForm } from "components/FullPageForm/FullPageForm"
+import { LazyIconField } from "components/IconField/LazyIconField"
 import { FullScreenLoader } from "components/Loader/FullScreenLoader"
 import { Margins } from "components/Margins/Margins"
 import { useFormik } from "formik"
-import { useRef, useState, FC } from "react"
+import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { colors } from "theme/colors"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
 import * as Yup from "yup"
 
@@ -37,7 +30,6 @@ const UpdateGroupForm: FC<{
   onCancel: () => void
   isLoading: boolean
 }> = ({ group, errors, onSubmit, onCancel, isLoading }) => {
-  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
   const form = useFormik<FormData>({
     initialValues: {
       name: group.name,
@@ -48,9 +40,6 @@ const UpdateGroupForm: FC<{
     onSubmit,
   })
   const getFieldHelpers = getFormHelpers<FormData>(form, errors)
-  const hasIcon = form.values.avatar_url && form.values.avatar_url !== ""
-  const emojiButtonRef = useRef<HTMLButtonElement>(null)
-  const styles = useStyles()
   const { t } = useTranslation("common")
 
   return (
@@ -65,65 +54,16 @@ const UpdateGroupForm: FC<{
           label="Name"
           variant="outlined"
         />
-        <TextField
+
+        <LazyIconField
           {...getFieldHelpers("avatar_url")}
           onChange={onChangeTrimmed(form)}
-          autoFocus
           fullWidth
-          label="Icon"
+          label={t("form.fields.icon")}
           variant="outlined"
-          InputProps={{
-            endAdornment: hasIcon ? (
-              <InputAdornment position="end">
-                <img
-                  alt=""
-                  src={form.values.avatar_url}
-                  className={styles.adornment}
-                  // This prevent browser to display the ugly error icon if the
-                  // image path is wrong or user didn't finish typing the url
-                  onError={(e) => (e.currentTarget.style.display = "none")}
-                  onLoad={(e) => (e.currentTarget.style.display = "inline")}
-                />
-              </InputAdornment>
-            ) : undefined,
-          }}
+          onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
         />
 
-        <Button
-          fullWidth
-          ref={emojiButtonRef}
-          variant="outlined"
-          size="small"
-          endIcon={<OpenDropdown />}
-          onClick={() => {
-            setIsEmojiPickerOpen((v) => !v)
-          }}
-        >
-          {t("emojiPicker.select")}
-        </Button>
-
-        <Popover
-          id="emoji"
-          open={isEmojiPickerOpen}
-          anchorEl={emojiButtonRef.current}
-          onClose={() => {
-            setIsEmojiPickerOpen(false)
-          }}
-        >
-          <Picker
-            theme="dark"
-            data={data}
-            onEmojiSelect={(emojiData) => {
-              form
-                .setFieldValue("avatar_url", `/emojis/${emojiData.unified}.png`)
-                .catch((ex) => {
-                  console.error(ex)
-                })
-              setIsEmojiPickerOpen(false)
-            }}
-          />
-        </Popover>
-
         <TextField
           {...getFieldHelpers("quota_allowance")}
           onChange={onChangeTrimmed(form)}
@@ -182,21 +122,4 @@ export const SettingsGroupPageView: FC<SettingsGroupPageViewProps> = ({
   )
 }
 
-const useStyles = makeStyles((theme) => ({
-  "@global": {
-    "em-emoji-picker": {
-      "--rgb-background": theme.palette.background.paper,
-      "--rgb-input": colors.gray[17],
-      "--rgb-color": colors.gray[4],
-    },
-  },
-  adornment: {
-    width: theme.spacing(3),
-    height: theme.spacing(3),
-  },
-  iconField: {
-    paddingBottom: theme.spacing(0.5),
-  },
-}))
-
 export default SettingsGroupPageView
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
diff --git a/site/vite.config.ts b/site/vite.config.ts
diff --git a/site/yarn.lock b/site/yarn.lock
