NextJs 앱을 최적화해보자(with next/bundle Analyzer) - 1

Mincho·2023년 6월 6일

[NextJs]

목록 보기

5/12

🔴 Bundle Analyzer

nextJs앱에서 npm run build를 하게 되면 다음과 같이 크기를 알려주지만 정확히 어떤 것이 얼마나 크기를 차지하고 있는지 모른다. 이를 위해 Bundle Analyzer를 통해 알아봐 번들 크기를 줄일 필요가 있다.

🟠 설치 및 세팅

npm i @next/bundle-analyzer

위와 같이 설치를 시작한다.

//next.config.js
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer(nextConfig);

다음과 같이 next.config.js파일에서 세팅해준다.

그리고

ANALYZE=true npm run build

다음과 같이 빌드를 실행하면

다음과 같이 번들의 크기별로 나타낸 것을 알 수 있다.
concatenated의 경우 용량을 줄이지 못할 가능성이 높은 파일이라고 한다. 나의 경우 일단 chakra ui module크기를 줄이고자 했다.

🟡 불필요한 모듈 줄이기

import { ChakraProvider } from '@chakra-ui/react'

==> import { ChakraProvider } from "@chakra-ui/provider"

chakraProvider를 다음과 같이 import 해주었다.

사이즈가 20kB정도 줄어들었다. 그런데 여기서 더 줄이는 방법이 있었다.

dynamic import

next js에서는 dynamic import를 제공한다. 사용하면 모듈을 빌드 타임이 아닌 런타임에 불러오도록 한다. 이를 통해 번들 파일을 분리하고 퍼포먼스 향상을 기대할 수 있다. 앱에는 초기 로딩부터 사용하지 않는 부분이 존재할 수 있으며, 또 그 부분의 사이즈가 생각보다 클 수 있기 때문이다.

const ChakraProvider = dynamic(() =>
  import("@chakra-ui/provider").then((mod) => mod.ChakraProvider)
);

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <CacheProvider>
      <ChakraProvider theme={theme}>{children}</ChakraProvider>
    </CacheProvider>
  );
}