mui 라이브러리 Minimizing bundle size 작업

이명진·2024년 2월 7일

minimizing mui refactor

모르면 참고해보자! Case Study

목록 보기

51/56

mui 라이브러리 공식 문서 내에 Minimizing bundle size 라는 문서가 있었다.

해당 주소 : https://mui.com/material-ui/guides/minimizing-bundle-size/

기존에 빌드가 너무 오래걸려서 refactoring을 하고 있는데 이것 또한 적용하면 좋을것 같아서 적용해보고 후기를 남긴다.

영어로 되어 있는데 간단하게 내가 해석한 방향으로 정리를 해보면 아래와 같다.
영어를 잘하는것이 아니라서 조금씩 해석해서 이해한건데 잘못된 번역과 이해가 있다면 조언 부탁드립니당

원인

원글 첫번째 글을 보면 아래와 같이 써있다.

Material UI's maintainers take bundle size very seriously.
Size snapshots are taken on every commit for every package and critical parts of those packages.

추측이지만 사이즈 스냅샷이 매번 모든 패키지에 커밋들을 생성해서 그런것 같다.

해결

ES6를 사용하면 tree-shaking을 할수 있다.

이미 ES6를 사용하니 넘어가도록 한다 .

1. import방식 수정

기존에는 import { Delete } from '@mui/icons-material'; 이런 형식으로 import를 실행해 왔다.
각각 객체로 가져왔는데 이런 방식은 2 depth icons-material 에서 다 찾아 봐야 하기 때문에 이런 방식보다는

import Delete from '@mui/icons-material/Delete';
 이렇게 세부적으로 들어가는 것을 추천하고 있다. 

// 🚀 Fast
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';

//비교 
import { Button, TextField } from '@mui/material';

위에가 더 빠르다고 말하는것 같다.

이렇게 하나씩 다 수정하면 좋긴하지만 이미 프로젝트 중반이고 너무많은 파일들이 있어서 이걸 손수 변경하기에는 무리가 있을듯 싶어서 적용하지는 못하였다.

다만 유의 사항으로는 3depth까지는 가지 말라고 한다.


// ✅ OK
import { Add as AddIcon } from '@mui/icons-material';
import { Tabs } from '@mui/material';
//                         ^^^^^^^^ 1st or top-level

// ✅ OK
import AddIcon from '@mui/icons-material/Add';
import Tabs from '@mui/material/Tabs';
//                              ^^^^ 2nd level

// ❌ NOT OK
import TabIndicator from '@mui/material/Tabs/TabIndicator';
//                                           ^^^^^^^^^^^^ 3rd level

이를위해서 .eslintrc 를 이용해서 방지하는 법을 알려줘서 나도 적용해봤지만 배포할때 에러가 나와서 파일을 삭제 했다.

2. babel plugin 적용

babe plugin을 적용하면 아래와 같은 이점이 있다고 한다.

UX: top-level tree-shaking 이 가능해진다.
DX: startup time 빨라진다. 중복된 코드를 줄일수가 있다. import 방법 보다 더빠르다고 해서 이것을 적용하게 되었다.

알려주는 방법으로는 react babel방법을 알려줘서 next로 변경해서 적용했다.

설치는 다음과 같다.

npm install babel-plugin-import babel-plugin-direct-import --save-dev

//babelrc.ts

const plugins = {
  presets: ['next/babel'],
  plugins: [
    [
      'import',
      {
        libraryName: '@material-ui/core',
        libraryDirectory: 'esm',
        camel2DashComponentName: false,
      },
      '@material-ui/core',
    ],
    'direct-import',
  ],
};

module.exports = { plugins };

여기 까지 적용해본 결과

빌드 타임을 비교해봤다.아직까지는 확실히 효과가 좋은지는 잘 모르겠다 몇번 더 써보고 봐야 할것 같다.