[Next.js] 패키지 가져오기 최적화

개요

• 배럴(barrel) 파일의 활용
• modularizeImports
• optimizePackageImport

---

Next.js(3.5) 업데이트 내용 (원본)

• 22% 더 빠른 로컬 서버 시작: 앱 및 페이지 라우터로 더 빠르게 반복
• 29% 더 빠른 HMR(Fast Refresh): 변경 사항을 저장할 때 더 빠른 반복을 위해
• 40% 적은 메모리 사용량: 실행 시 측정next start
• 최적화된 패키지 가져오기: 인기 있는 아이콘 및 구성 요소 라이브러리를 사용할 때 더 빠른 업데이트
• next/image개선 사항: <picture> , 아트 디렉션 및 다크 모드 지원
• 그리고 438개 이상의 버그가 패치

 

배럴(barrel) 파일의 활용

자바스크립트에서 배럴 파일이란 단일 파일에서 여러 모듈을 그룹화하여 내보내는 방법

 

 

예시)

uitls/ 내에 3개의 모듈 (modules1.js, modules2.js , modules3.js ) 존재 시 index.js라는 배럴 파일을 활용

import module1 from "./utils/module1";
import module2 from "./utils/module2";
import module3 from "./utils/module3";

import { module1, module2, module3 } from "./utils";

• 코드 구성 및 유지보수성 향상

 

문제점)

모든 require 및 import에는 자바스크립트 런타임에 숨겨진 비용이 존재한다. 그렇기에 배럴파일에서 단일 내보내기를 사용하려는 경우 불필요한 다른 모듈을 가져오는 대가를 지불하게 된다 (많은 모듈에 개수에 비해 적은 사용량은 불필요한 비용을 지불한다)

---

modularizeImports

Next.js에서 처음으로 시도한 접근방식으로 내보낸 이름과 패키지의 배럴 파일 진입점 뒤에 있는 원래 모듈 경로의 매필관계를 구성할 수 있는 옵션

 

 

예시)

// my-lib > index.js

export { default as module1 } from "./module1";
export { default as module2 } from "./module2";
export { default as module3 } from "./module3";

배럴파일이 있을 때 평소처럼 import ... from index.js 가 아닌 import module2 from 'my-lib/modules2'로 변경하여 불필요한 모듈을 로드하지 않도록 한다 (my-lib/{{member}}의 컴파일러 트랜스폼을 구성)

• 빌드 시간과 런타임 모두 빨라졌다.

 

문제점)

내부 디렉토리 구조를 기반으로 하며, 수작업으로 대부분 구성되므로 수백만개의 npm패키지가 있다면 효율적이지 못하다. 나중에 해당 라이브러리의 내부 구조가 변경이 된다면 에러가 발생

---

optimizePackageImports

Next.js 13.5에서 도입하게 된 새로운 옵션

module.exports = {
  experimental: {
    optimizePackageImports: ["my-lib"],
  },
};

• 옵션을 사용하기 위해서 Next.js가 진입 파일을 분석하여 배럴파일인지를 파악한다.
• 배럴파일이 확인된다면 moularizeImports가 작동하는 방시과 유사하게 자동 매핑을 한다.
• 이 프로세스는 한 번에 진입점 배럴 파일만 확인하므로 비용이 저렴하다. (배럴이 아닌 파일이면 프로세스를 종료)
• 이 새로운 옵션은 패키지 내부 구현에 의존하지 않기에 많은 공통 라이브러리에 적용할 수 있다.
• 이 옵션이 적용가능한 공통라이브러리 목록

성능개선 측정)

라이브러리에 따라 상이하지만 전체적으로 모듈개수의 하락과 그에 따른 시간 단축

• build 과정에서의 28%빠른 실행
• 40%빨라진 콜드 스타트
• 15~70%단축된 개발 시간

 

Next 13.5 업데이트에서 도입한 옵션을 통해서 패키지에서 필요한 모듈만 가져와서 최적화를 하는 방식이 도입이 되었으며 바로 사용할 수 있는 라이브러리의 목록은 보기와 같다.
또한 이전에 사용하던 배럴파일의 문제점에 대해서 생각할 수 있었고 modulaizeImports 방식을 통해서 불러오는 것이 효율적이라는 생각이 든다.
패키지를 import하는 방법과 프로젝트에서 만든 component들을 효율적으로 불러오는 방식에 대해 알 수 있었다.

 

 

 

 

 

참고자료 : 원본 , 번역블로그