패키지 번들링 최적화

외부 패키지를 번들링하면 애플리케이션의 성능을 크게 향상시킬 수 있습니다. 기본적으로 서버 컴포넌트와 라우트 핸들러 내에서 가져온 패키지는 Next.js에 의해 자동으로 번들링됩니다. 이 페이지에서는 패키지 번들링을 분석하고 더 최적화하는 방법을 안내합니다.

JavaScript 번들 분석하기

@next/bundle-analyzer는 Next.js용 플러그인으로, 애플리케이션 번들의 크기를 관리하는 데 도움을 줍니다. 각 패키지와 그 종속성의 크기에 대한 시각적 보고서를 생성합니다. 이 정보를 사용하여 큰 종속성을 제거하거나, 코드를 분할하거나 지연 로드할 수 있습니다.

설치

다음 명령을 실행하여 플러그인을 설치하세요:

npm i @next/bundle-analyzer
# 또는
yarn add @next/bundle-analyzer
# 또는
pnpm add @next/bundle-analyzer

그런 다음 next.config.js에 번들 분석기의 설정을 추가하세요.

/** @type {import('next').NextConfig} */
const nextConfig = {};
 
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});
 
module.exports = withBundleAnalyzer(nextConfig);

보고서 생성하기

다음 명령을 실행하여 번들을 분석하세요:

ANALYZE=true npm run build
# 또는
ANALYZE=true yarn build
# 또는
ANALYZE=true pnpm build

보고서가 브라우저에서 세 개의 새 탭을 열어 검사할 수 있습니다. 주기적으로 애플리케이션의 번들을 평가하면 시간이 지남에 따라 애플리케이션 성능을 유지하는 데 도움이 될 수 있습니다.

패키지 가져오기 최적화

아이콘 라이브러리와 같은 일부 패키지는 수백 개의 모듈을 내보낼 수 있어 개발 및 프로덕션 환경에서 성능 문제를 일으킬 수 있습니다.

next.config.js에 optimizePackageImports 옵션을 추가하여 이러한 패키지의 가져오기 방식을 최적화할 수 있습니다. 이 옵션은 여러 명명된 내보내기가 있는 가져오기 문을 작성하는 편의성을 유지하면서 실제로 사용하는 모듈만 로드합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizePackageImports: ["icon-library"],
  },
};
 
module.exports = nextConfig;

Next.js는 일부 라이브러리를 자동으로 최적화하므로 이들은 optimizePackageImports 목록에 포함될 필요가 없습니다. 전체 목록을 참조하세요.

특정 패키지를 번들링에서 제외하기

서버 컴포넌트와 라우트 핸들러 내에서 가져온 패키지는 Next.js에 의해 자동으로 번들링되므로, next.config.js에서 serverExternalPackages 옵션을 사용하여 특정 패키지를 번들링에서 제외할 수 있습니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  serverExternalPackages: ["package-name"],
};
 
module.exports = nextConfig;

Next.js는 현재 호환성 작업 중인 인기 있는 패키지 목록을 포함하고 있으며 이들은 자동으로 제외됩니다. 전체 목록을 참조하세요.