더욱 향상된 NextJS: Next.js 13.5 버전 소식
프론트엔드 개발자들에게는 즐거운 소식입니다. NextJs 13.5버전이 릴리즈 되었습니다. 🎉 한국 사람들이 읽기 쉽게 원본글을 번역했습니다. NextJs을 애용하는 입장에서 반가운 소식이네요. (공부할 것도 많아졌네요 🥲)
해당 글은 NextJs 13.5 소식을 번역하고 각색한 글입니다.
목차
요약
- 로컬 서버 시작이 22% 빨라짐: 앱 & 페이지 라우터로 더 빠르게 반복 작업
- HMR (Fast Refresh)이 29% 빨라짐: 변경 사항을 저장할 때 더 빠른 반복 작업 가능
- 메모리 사용량 40% 감소:
next start실행 시 측정됨 - 패키지 임포트 최적화: 유명한 아이콘 및 컴포넌트 라이브러리를 사용할 때 더 빠른 업데이트
next/image개선:<picture>, 아트 디렉션, 다크 모드 지원- 그 외 438개 이상의 버그 패치!
오늘 업그레이드하고 10월 26일 Next.js Conf에 등록하세요:
npm i next@latest react@latest react-dom@latest eslint-config-next@latest
시작 시간과 Fast Refresh 시간 개선
앱 라우터의 지속적인 적용을 보게 되어 기쁩니다. 현재 월 대비 80% 성장을 보이고 있으며, 이는 HTTP 아카이브가 크롤링한 상위 1000만 개의 출처를 기준으로 합니다.
Next.js 13.4 이후로, 우리의 초점은 앱 라우터 어플리케이션의 성능과 신뢰성을 향상시키는 것이었습니다. 13.4와 13.5를 비교했을 때, 새로운 애플리케이션에서 다음과 같은 개선을 확인하였습니다:
- 로컬 서버 시작이 22% 빨라짐
- HMR (Fast Refresh)이 29% 빨라짐
- 메모리 사용량 40% 감소
우리는 다음과 같은 최적화를 통해 이러한 성능 향상을 이루었습니다:
- 캐싱 또는 느린 작업을 최소화하여 덜 작업하기
- 파일 시스템 작업 비용을 최적화하기
- 컴파일 중에 증분 트리 순회를 더 효율적으로 하기
- 불필요한 차단 동기 호출을 지연 처리하기
- 대형 아이콘 라이브러리 자동 설정
Next.js 사용자인 Lattice는 테스트 중 컴파일이 87-92% 빨라진다고 보고했습니다.
우리는 현재의 번들러 성능을 지속적으로 개선하면서, 병렬로 Turbopack (베타) 작업도 진행 중입니다. 13.5 버전에서는 next dev --turbo가 더 많은 기능을 지원합니다.
패키지 임포트 최적화
큰 아이콘 라이브러리나 컴포넌트 라이브러리 또는 수백, 수천의 모듈을 재-익스포트하는 다른 의존성을 사용할 때 로컬 개발 성능과 프로덕션에서의 냉동 시작을 개선하기 위해 흥미로운 돌파구를 찾았습니다.
이전에는 modularizeImports 지원을 추가하여 이러한 라이브러리를 사용할 때 어떻게 임포트가 처리되어야 하는지 설정할 수 있었습니다. 13.5에서는 이 옵션을 optimizePackageImports로 대체하여, 더 이상 임포트의 매핑을 지정할 필요가 없지만 대신 자동으로 임포트를 최적화해줍니다.
@mui/icons-material, @mui/material, date-fns, lodash, lodash-es, ramda, react-bootstrap, @headlessui/react, @heroicons/react, lucide-react와 같은 라이브러리는 이제 자동으로 최적화되어, 실제로 사용하는 모듈만 로딩되면서도 여러 명명된 내보내기와 함께 import 문을 작성하는 편리함을 제공합니다.
마치며
함게 읽으면 좋은 글
