Next.js 13.5 正式發布，速度大幅提升！-魔扣目錄

9 月 19 日，Next.js 13.5 正式發布，該版本通過以下方式提高了本地開發性能和可靠性：

本地服務器啟動速度提高 22%：使用App和Pages Router可以更快地進行迭代
HMR（快速刷新）速度提高 29%：在保存更改時進行更快的迭代
內存使用量減少 40%：在運行next start 時測量
優化的包導入：使用流行的圖標和組件庫時進行更快的更新
next/image 改進：支持<picture>標簽、暗模式等
修復了超過 438 個錯誤！

改善啟動和快速刷新時間

App Router 的采用在持續增加，根據 HTTP Archive 對前1000萬個網站進行的統計數據來看，其增長速度達到了每月 80%。

自 Next.js 13.4 版本以來，Next.js 團隊的重點一直是改進 App Router 應用的性能和可靠性。將13.4與13.5版本進行比較，在一個新的應用上，可以看到以下改進：

本地服務器啟動速度提高 22%
HMR（快速刷新）速度提高 29%
內存使用量減少 40%

通過以下優化方法實現了這種性能提升：

通過緩存或減少慢速操作來減少工作量
優化昂貴的文件系統操作
在編譯過程中實現更好的增量樹遍歷
將不必要的阻塞同步調用改為懶加載
自動配置大型圖標庫

Next.js 用戶 Hanford 在他們的測試中報告了其編譯速度提升 87-92%！

在繼續迭代和改進當前打包工具性能的同時，Next.js 團隊還在開發 Turbopack（beta）以進一步提高性能。在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等庫現在都可以自動優化，只加載實際使用的模塊，同時方便編寫帶有很多命名導出的導入語句。

next/image 改進

基于社區的反饋，此版本添加了一個新的實驗性函數unstable_getImgProps()，以支持不直接使用<Image>組件的高級用例，包括：

處理background-image或image-set
使用canvas的context.drawImage()或new Image()時進行操作
使用<picture>媒體查詢來實現藝術方向或明/暗模式圖片
利用<picture>元素的媒體查詢功能，實現明/暗模式圖片的切換。

import { unstable_getImgProps as getImgProps } from 'next/image';

export default function Page() {
const common = { alt: 'Hero', width: 800, height: 400 };
const {
props: { srcSet: dark },
} = getImgProps({ ...common, src: '/dark.png' });
const {
props: { srcSet: light, ...rest },
} = getImgProps({ ...common, src: '/light.png' });

return (
<picture>
<source media="(prefers-color-scheme: dark)" srcSet={dark} />
<source media="(prefers-color-scheme: light)" srcSet={light} />
<img {...rest} />
</picture>
);
}