Next.js with MUI icons - npm run dev 속도 개선

 

MUI icons을 사용하는 경우 엄청난 속도 저하를 경험할 수 있다.

npm run dev 할 때 icons 전부를 불러오려고 하는데 이를 최적화 해야 한다.

 

1. next.config.js 수정

experimental: {
    modularizeImports: {
      "@mui/material": {
        transform: "@mui/material/{{member}}",
      },
      "@mui/icons-material/?(((\\w*)?/?)*)": {
        transform: "@mui/icons-material/{{ matches.[1] }}/{{member}}",
      },
    },
  },

 

 

2. import 방법 수정

// X
import * as MaterialIcons from "@mui/icons-material"

// O 사용하는 Icon만 import
import { Add, Settings } from "@mui/icons-material"

 

ref: https://lightrun.com/answers/vercel-next-js-nextjs-compiling-extremely-slow