perf(dev): speed up dev server

Avoid compiling the entire of mui library by using babel.
2025-12-17 12:32:56 +00:00 · 2022-03-25 10:03:49 +00:00
parent b02c9d6169
commit 55fd4a6473
15 changed files with 114 additions and 83 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,5 @@
 // https://emotion.sh/docs/css-prop##babel-preset
+// https://mui.com/guides/minimizing-bundle-size/#option-2
 {
  "presets": [
    [
@@ -11,5 +12,25 @@
      }
    ]
  ],
-  "plugins": [["@emotion/babel-plugin"]]
+  "plugins": [
+    [
+      "babel-plugin-import",
+      {
+        "libraryName": "@mui/material",
+        "libraryDirectory": "",
+        "camel2DashComponentName": false
+      },
+      "core"
+    ],
+    [
+      "babel-plugin-import",
+      {
+        "libraryName": "@mui/icons-material",
+        "libraryDirectory": "",
+        "camel2DashComponentName": false
+      },
+      "icons"
+    ],
+    ["@emotion/babel-plugin"]
+  ]
 }
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
    "@types/react": "17.0.41",
    "@typescript-eslint/eslint-plugin": "^5.15.0",
    "@typescript-eslint/parser": "^5.15.0",
+    "babel-plugin-import": "^1.13.3",
    "eslint": "8.11.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^16.1.4",
--- a/src/components/common/Main.tsx
+++ b/src/components/common/Main.tsx
@@ -1,4 +1,5 @@
-import { Box, css, Stack, Theme, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
+import { css, Theme } from "@mui/material/styles";
 import { memo, PropsWithChildren } from "react";

 type Props = PropsWithChildren<{
--- a/src/components/layout/Drawer.tsx
+++ b/src/components/layout/Drawer.tsx
@@ -1,20 +1,23 @@
-import CodeIcon from "@mui/icons-material/Code";
-import DataObjectIcon from "@mui/icons-material/DataObject";
-import DragHandleIcon from "@mui/icons-material/DragHandle";
-import FilterIcon from "@mui/icons-material/Filter";
-import FingerprintIcon from "@mui/icons-material/Fingerprint";
-import HomeIcon from "@mui/icons-material/Home";
-import ImageIcon from "@mui/icons-material/Image";
-import KeyIcon from "@mui/icons-material/Key";
-import LinkIcon from "@mui/icons-material/Link";
-import NoteAddIcon from "@mui/icons-material/NoteAdd";
-import NumbersIcon from "@mui/icons-material/Numbers";
-import SortIcon from "@mui/icons-material/Sort";
-import SyncAltIcon from "@mui/icons-material/SyncAlt";
-import TextFieldsIcon from "@mui/icons-material/TextFields";
-import TextIncreaseIcon from "@mui/icons-material/TextIncrease";
-import TransformIcon from "@mui/icons-material/Transform";
-import { Box, css, Divider, Drawer, List, Stack } from "@mui/material";
+import {
+  Code,
+  DataObject,
+  DragHandle,
+  Filter,
+  Fingerprint,
+  Home,
+  Image as ImageIcon,
+  Key,
+  Link,
+  NoteAdd,
+  Numbers,
+  Sort,
+  SyncAlt,
+  TextFields,
+  TextIncrease,
+  Transform,
+} from "@mui/icons-material";
+import { Box, Divider, Drawer, List, Stack } from "@mui/material";
+import { css } from "@mui/material/styles";
 import { memo } from "react";

 import { pagesPath } from "@/libs/$path";
@@ -41,41 +44,41 @@ const divider = css`

 const toolGroups = [
  {
-    icon: <TransformIcon />,
+    icon: <Transform />,
    title: "Converters",
    tools: [
-      { icon: <TransformIcon />, title: "Json <> Yaml", href: pagesPath.$url(), disabled: true },
-      { icon: <NumbersIcon />, title: "Number Base", href: pagesPath.$url(), disabled: true },
+      { icon: <Transform />, title: "Json <> Yaml", href: pagesPath.$url(), disabled: true },
+      { icon: <Numbers />, title: "Number Base", href: pagesPath.$url(), disabled: true },
    ],
  },
  {
-    icon: <SyncAltIcon />,
+    icon: <SyncAlt />,
    title: "Encoders / Decoders",
    tools: [
-      { icon: <CodeIcon />, title: "HTML", href: pagesPath.$url(), disabled: true },
-      { icon: <LinkIcon />, title: "URL", href: pagesPath.$url(), disabled: true },
-      { icon: <DragHandleIcon />, title: "Base 64", href: pagesPath.$url(), disabled: true },
-      { icon: <KeyIcon />, title: "JWT", href: pagesPath.$url(), disabled: true },
+      { icon: <Code />, title: "HTML", href: pagesPath.$url(), disabled: true },
+      { icon: <Link />, title: "URL", href: pagesPath.$url(), disabled: true },
+      { icon: <DragHandle />, title: "Base 64", href: pagesPath.$url(), disabled: true },
+      { icon: <Key />, title: "JWT", href: pagesPath.$url(), disabled: true },
    ],
  },
  {
-    icon: <SortIcon />,
+    icon: <Sort />,
    title: "Formatters",
-    tools: [{ icon: <DataObjectIcon />, title: "Json", href: pagesPath.$url(), disabled: true }],
+    tools: [{ icon: <DataObject />, title: "Json", href: pagesPath.$url(), disabled: true }],
  },
  {
-    icon: <NoteAddIcon />,
+    icon: <NoteAdd />,
    title: "Generators",
    tools: [
-      { icon: <FingerprintIcon />, title: "Hash", href: pagesPath.$url(), disabled: true },
-      { icon: <NumbersIcon />, title: "UUID", href: pagesPath.$url(), disabled: true },
+      { icon: <Fingerprint />, title: "Hash", href: pagesPath.$url(), disabled: true },
+      { icon: <Numbers />, title: "UUID", href: pagesPath.$url(), disabled: true },
    ],
  },
  {
-    icon: <TextFieldsIcon />,
+    icon: <TextFields />,
    title: "Text",
    tools: [
-      { icon: <TextIncreaseIcon />, title: "Regex Tester", href: pagesPath.$url(), disabled: true },
+      { icon: <TextIncrease />, title: "Regex Tester", href: pagesPath.$url(), disabled: true },
    ],
  },
  {
@@ -83,7 +86,7 @@ const toolGroups = [
    title: "Graphic",
    tools: [
      {
-        icon: <FilterIcon />,
+        icon: <Filter />,
        title: "PNG / JPEG Compressor",
        href: pagesPath.$url(),
        disabled: true,
@@ -99,7 +102,7 @@ const StyledComponent = () => (
    </Box>
    <List component="nav">
      <Stack spacing={1}>
-        <DrawerItem icon={<HomeIcon />} title="All tools" href={pagesPath.$url()} />
+        <DrawerItem icon={<Home />} title="All tools" href={pagesPath.$url()} />
        <Divider css={divider} />
        <Box>
          {toolGroups.map(({ icon, title, tools }) => (
--- a/src/components/layout/DrawerCollapseItem.tsx
+++ b/src/components/layout/DrawerCollapseItem.tsx
@@ -1,5 +1,4 @@
-import ExpandLess from "@mui/icons-material/ExpandLess";
-import ExpandMore from "@mui/icons-material/ExpandMore";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
 import { Collapse, List, ListItemButton, ListItemText } from "@mui/material";
 import equal from "fast-deep-equal";
 import { ComponentPropsWithoutRef, memo, MouseEventHandler, useCallback, useState } from "react";
--- a/src/components/layout/DrawerItem.tsx
+++ b/src/components/layout/DrawerItem.tsx
@@ -1,4 +1,5 @@
-import { Box, css, ListItemButton, ListItemText, Tooltip } from "@mui/material";
+import { Box, ListItemButton, ListItemText, Tooltip } from "@mui/material";
+import { css } from "@mui/material/styles";
 import NextLink, { LinkProps } from "next/link";
 import { ComponentPropsWithoutRef, memo } from "react";

--- a/src/components/layout/DrawerItemIcon.tsx
+++ b/src/components/layout/DrawerItemIcon.tsx
@@ -1,4 +1,5 @@
-import { css, ListItemIcon } from "@mui/material";
+import { ListItemIcon } from "@mui/material";
+import { css } from "@mui/material/styles";
 import { memo, ReactNode } from "react";

 type Props = {
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,14 +1,6 @@
-import GitHubIcon from "@mui/icons-material/GitHub";
-import {
-  AppBar,
-  css,
-  IconButton,
-  Link as MuiLink,
-  Stack,
-  Theme,
-  Toolbar,
-  Typography,
-} from "@mui/material";
+import { GitHub } from "@mui/icons-material";
+import { AppBar, IconButton, Link as MuiLink, Stack, Toolbar, Typography } from "@mui/material";
+import { css, Theme } from "@mui/material/styles";
 import NextLink from "next/link";
 import { memo } from "react";

@@ -73,7 +65,7 @@ const StyledComponent = () => (
          rel="noreferrer"
          css={gitHubLink}
        >
-          <GitHubIcon css={gitHubIcon} />
+          <GitHub css={gitHubIcon} />
        </a>
      </IconButton>
    </Toolbar>
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,4 +1,5 @@
-import { Box, css, Stack } from "@mui/material";
+import { Box, Stack } from "@mui/material";
+import { css } from "@mui/material/styles";
 import Head from "next/head";
 import { memo, PropsWithChildren } from "react";

--- a/src/components/layout/SearchBar.tsx
+++ b/src/components/layout/SearchBar.tsx
@@ -1,5 +1,6 @@
-import SearchIcon from "@mui/icons-material/Search";
-import { Box, css, InputBase, Paper, Theme } from "@mui/material";
+import { Search } from "@mui/icons-material";
+import { Box, InputBase, Paper } from "@mui/material";
+import { css, Theme } from "@mui/material/styles";
 import { useRouter } from "next/router";
 import { ChangeEventHandler, memo, useCallback } from "react";
 import { useRecoilState } from "recoil";
@@ -41,7 +42,7 @@ const StyledComponent = ({ text, onChange }: Props) => (
      css={input}
    />
    <Box css={iconWrapper}>
-      <SearchIcon />
+      <Search />
    </Box>
  </Paper>
 );
--- a/src/components/pages/home/Card.tsx
+++ b/src/components/pages/home/Card.tsx
@@ -4,11 +4,10 @@ import {
  CardActionArea,
  CardContent,
  CardMedia,
-  css,
-  Theme,
  Tooltip,
  Typography,
 } from "@mui/material";
+import { css, Theme } from "@mui/material/styles";
 import NextLink, { LinkProps } from "next/link";
 import { memo, ReactNode } from "react";

--- a/src/components/pages/home/Content.tsx
+++ b/src/components/pages/home/Content.tsx
@@ -1,13 +1,15 @@
-import CodeIcon from "@mui/icons-material/Code";
-import DataObjectIcon from "@mui/icons-material/DataObject";
-import DragHandleIcon from "@mui/icons-material/DragHandle";
-import FilterIcon from "@mui/icons-material/Filter";
-import FingerprintIcon from "@mui/icons-material/Fingerprint";
-import KeyIcon from "@mui/icons-material/Key";
-import LinkIcon from "@mui/icons-material/Link";
-import NumbersIcon from "@mui/icons-material/Numbers";
-import TextIncreaseIcon from "@mui/icons-material/TextIncrease";
-import TransformIcon from "@mui/icons-material/Transform";
+import {
+  Code,
+  DataObject,
+  DragHandle,
+  Filter,
+  Fingerprint,
+  Key,
+  Link,
+  Numbers,
+  TextIncrease,
+  Transform,
+} from "@mui/icons-material";
 import { Grid } from "@mui/material";
 import Fuse from "fuse.js";
 import { memo } from "react";
@@ -25,7 +27,7 @@ type Props = {

 const tools = [
  {
-    icon: <TransformIcon />,
+    icon: <Transform />,
    title: "Json <> Yaml Converter",
    description: "Convert Json data to Yaml and vice versa",
    keywords: "json yaml converter",
@@ -33,7 +35,7 @@ const tools = [
    disabled: true,
  },
  {
-    icon: <NumbersIcon />,
+    icon: <Numbers />,
    title: "Number Base Converter",
    description: "Convert numbers from one base to another",
    keywords: "number base converter",
@@ -41,7 +43,7 @@ const tools = [
    disabled: true,
  },
  {
-    icon: <CodeIcon />,
+    icon: <Code />,
    title: "HTML Encoder / Decoder",
    description:
      "Encode or decode all the applicable characters to their corresponding HTML entities",
@@ -50,7 +52,7 @@ const tools = [
    disabled: true,
  },
  {
-    icon: <LinkIcon />,
+    icon: <Link />,
    title: "URL Encoder / Decoder",
    description:
      "Encode or decode all the applicable characters to their corresponding URL entities",
@@ -59,7 +61,7 @@ const tools = [
    disabled: true,
  },
  {
-    icon: <DragHandleIcon />,
+    icon: <DragHandle />,
    title: "Base 64 Encoder / Decoder",
    description: "Encode and decode Base64 data",
    keywords: "base64 encoder decocder",
@@ -67,7 +69,7 @@ const tools = [
    disabled: true,
  },
  {
-    icon: <KeyIcon />,
+    icon: <Key />,
    title: "JWT Decoder",
    description: "Decode a JWT header, payload and signature",
    keywords: "jwt json web token decocder",
@@ -75,7 +77,7 @@ const tools = [
    disabled: true,
  },
  {
-    icon: <DataObjectIcon />,
+    icon: <DataObject />,
    title: "JSON Formatter",
    description: "Indent or minify JSON data",
    keywords: "json formatter",
@@ -83,7 +85,7 @@ const tools = [
    disabled: true,
  },
  {
-    icon: <FingerprintIcon />,
+    icon: <Fingerprint />,
    title: "Hash Generator",
    description: "Calculate MD5, SHA1, SHA256 and SHA512 hash from text data",
    keywords: "hash generator md5 sha1 sha256 sha512",
@@ -91,7 +93,7 @@ const tools = [
    disabled: true,
  },
  {
-    icon: <NumbersIcon />,
+    icon: <Numbers />,
    title: "UUID Generator",
    description: "Generate UUIDs version 1 and 4",
    keywords: "guid uuid1 uuid4 generator",
@@ -99,7 +101,7 @@ const tools = [
    disabled: true,
  },
  {
-    icon: <TextIncreaseIcon />,
+    icon: <TextIncrease />,
    title: "Regex Tester",
    description: "Validate and test regular expressions",
    keywords: "regular expression regex validator tester",
@@ -107,7 +109,7 @@ const tools = [
    disabled: true,
  },
  {
-    icon: <FilterIcon />,
+    icon: <Filter />,
    title: "PNG / JPEG Compressor",
    description: "Lossless PNG and JPEG optimizer",
    keywords: "png jpeg compressor optimizer image",
--- a/src/data/mui.ts
+++ b/src/data/mui.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "@mui/material";
+import { createTheme } from "@mui/material/styles";

 export const theme = createTheme({
  palette: {
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,6 @@
 import { CacheProvider, EmotionCache } from "@emotion/react";
-import { CssBaseline, ThemeProvider } from "@mui/material";
+import { CssBaseline } from "@mui/material";
+import { ThemeProvider } from "@mui/material/styles";
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import { RecoilRoot } from "recoil";
--- a/yarn.lock
+++ b/yarn.lock
@@ -9,7 +9,7 @@
  dependencies:
    "@babel/highlight" "^7.16.7"

-"@babel/helper-module-imports@^7.12.13":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
@@ -50,7 +50,7 @@
    core-js-pure "^3.20.2"
    regenerator-runtime "^0.13.4"

-"@babel/runtime@^7.10.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
  version "7.17.8"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2"
  integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==
@@ -636,6 +636,14 @@ axobject-query@^2.2.0:
  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==

+babel-plugin-import@^1.13.3:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz#9dbbba7d1ac72bd412917a830d445e00941d26d7"
+  integrity sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/runtime" "^7.0.0"
+
 babel-plugin-macros@^2.6.1:
  version "2.8.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"