Next.js에서 MUI 불필요한 청크 제거 방법

문제 상황

누군가가 Stack Overflow에 “Next.js 프로젝트에서 Material-UI(MUI)로 불필요한 청크를 어떻게 제거할 수 있을까?”라는 질문을 했습니다. 이 문제는 웹 페이지 로딩 속도와 성능에 큰 영향을 미칠 수 있으며, 이러한 문제를 해결하지 않으면 사용자 경험이 떨어질 수 있습니다.

해결 방안 1: Tree Shaking 활용하기

Tree Shaking은 웹팩(Webpack)과 같은 모듈 번들러가 제공하는 기능입니다. 이 기능을 활용하면 실제로 사용되지 않는 코드를 자동으로 제거해 줍니다. Next.js는 웹팩을 내장하고 있으므로, 이 기능을 활용할 수 있습니다.

1. next.config.js 파일을 열고 다음 코드를 추가합니다.

    module.exports = {
      webpack: (config) => {
        config.optimization.usedExports = true;
        return config;
      },
    };
   

해결 방안 2: Dynamic Imports 사용하기

Dynamic Imports는 JavaScript의 특성 중 하나로, 필요한 모듈만 로딩할 수 있게 해줍니다. 예를 들어, MUI의 특정 컴포넌트만 필요하다면 다음과 같이 코드를 작성할 수 있습니다.

import dynamic from 'next/dynamic';

const Button = dynamic(() => import('@mui/material/Button'));

이렇게 하면 Button 컴포넌트만 불러와 사용합니다. 이 방법을 사용하면 불필요한 MUI 청크가 로딩되는 것을 방지할 수 있습니다.

해결 방안 3: Custom Babel Plugin 사용하기

Babel은 JavaScript 코드를 변환해주는 도구입니다. MUI는 Babel 플러그인을 제공하여 불필요한 청크를 제거할 수 있습니다. 이를 위해서는 .babelrc 파일에 다음과 같은 설정을 추가해야 합니다.

{
  "plugins": ["@mui/system/babel-plugin"]
}

이 방법을 사용하면 MUI의 불필요한 청크가 제거됩니다.

마치며

Next.js와 MUI를 함께 사용할 때 불필요한 청크를 제거하는 것은 성능 향상을 위해 중요합니다. Tree Shaking, Dynamic Imports, Custom Babel Plugin 등 다양한 방법을 활용하여 이 문제를 해결할 수 있습니다. 이러한 방법들을 적절히 조합하면 웹 애플리케이션의 성능을 크게 향상시킬 수 있습니다.