Next.js 13.5 正式發(fā)布，速度大幅提升！
9 月 19 日，Next.js 13.5 正式發(fā)布，該版本通過以下方式提高了本地開發(fā)性能和可靠性：
- 本地服務器啟動速度提高 22%：使用App和Pages Router可以更快地進行迭代。
- HMR（快速刷新）速度提高 29%：在保存更改時進行更快的迭代。
- 內(nèi)存使用量減少 40%：在運行next start 時測量。
- 優(yōu)化的包導入：使用流行的圖標和組件庫時進行更快的更新。
- next/image 改進：支持<picture>標簽、暗模式等。
- 修復了超過 438 個錯誤！
改善啟動和快速刷新時間
App Router 的采用在持續(xù)增加，根據(jù) HTTP Archive 對前1000萬個網(wǎng)站進行的統(tǒng)計數(shù)據(jù)來看，其增長速度達到了每月 80%。
自 Next.js 13.4 版本以來，Next.js 團隊的重點一直是改進 App Router 應用的性能和可靠性。將13.4與13.5版本進行比較，在一個新的應用上，可以看到以下改進：
- 本地服務器啟動速度提高 22%。
- HMR（快速刷新）速度提高 29%。
- 內(nèi)存使用量減少 40%。
通過以下優(yōu)化方法實現(xiàn)了這種性能提升：
- 通過緩存或減少慢速操作來減少工作量。
- 優(yōu)化昂貴的文件系統(tǒng)操作。
- 在編譯過程中實現(xiàn)更好的增量樹遍歷。
- 將不必要的阻塞同步調(diào)用改為懶加載。
- 自動配置大型圖標庫。
Next.js 用戶 Hanford 在他們的測試中報告了其編譯速度提升 87-92%！
在繼續(xù)迭代和改進當前打包工具性能的同時，Next.js 團隊還在開發(fā) Turbopack（beta）以進一步提高性能。在13.5版本中，next dev --turbo現(xiàn)在支持更多功能。
優(yōu)化的包導入
此版本對包導入進行了令人興奮的突破，改善了在使用大型圖標或組件庫以及其他重新導出了數(shù)百或數(shù)千個模塊的依賴項時的本地開發(fā)性能和生產(chǎn)冷啟動速度。
之前，添加了modularizeImports的支持，使開發(fā)者能夠配置在使用這些庫時如何解析導入。在13.5版本中，用optimizePackageImports替代了這個選項，它不需要指定導入映射，而是會自動優(yōu)化導入。
像@mui/icons-material、@mui/material、date-fns、lodash、lodash-es、ramda、react-bootstrap、@headlessui/react、@heroicons/react和lucide-react等庫現(xiàn)在都可以自動優(yōu)化，只加載實際使用的模塊，同時方便編寫帶有很多命名導出的導入語句。
next/image 改進
基于社區(qū)的反饋，此版本添加了一個新的實驗性函數(shù)unstable_getImgProps()，以支持不直接使用<Image>組件的高級用例，包括：
- 處理background-image或image-set。
- 使用canvas的context.drawImage()或new Image()時進行操作。
- 使用<picture>媒體查詢來實現(xiàn)藝術(shù)方向或明/暗模式圖片。
- 利用<picture>元素的媒體查詢功能，實現(xiàn)明/暗模式圖片的切換。
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>
);
}此外，現(xiàn)在placeholder屬性支持提供任意的data:image/作為占位圖像，這些圖像不會被模糊處理。
其他改進
自從13.4.0版本以來，我修復了超過438個錯誤，并進行了各種改進，包括：
- [文檔] 關(guān)于表單和變異的新文檔。
- [文檔] 關(guān)于服務端和客戶端組件的新文檔。
- [文檔] 關(guān)于內(nèi)容安全策略和非ces的新文檔。
- [文檔] 關(guān)于緩存和重新驗證的新文檔。
- [功能] 在頁面路由器中增加了對next/navigation中的useParams和useSearchParams的支持，以便逐步采用。
- [功能] 在router.push / router.replace上支持scroll: false。
- [功能] 在next/link上支持scroll={false}。
- [功能] 開發(fā)環(huán)境支持HTTPS：next dev --experimental-https。
- [功能] 增加了對cookies().has()的支持。
- [功能] 增加了對IPv6主機名的支持。
- [功能] App Router現(xiàn)在支持Yarn PnP。
- [功能] 服務器操作中添加了對redirect()的支持。
- [功能] 通過創(chuàng)建項目使用Bun的支持：bunx create-next-app。
- [功能] 中間件和邊緣運行時中的草稿模式支持。
- [功能] 現(xiàn)在中間件中支持cookies()和headers()。
- [功能] Metadata API現(xiàn)在在Twitter卡片中支持summary_large_image。
- [功能] RedirectType現(xiàn)在從next/navigation導出。
- [功能] 添加了Playwright的實驗性測試模式。
- [改進] 重構(gòu)了next start，能夠處理比之前多達1062%的請求量。
- [改進] 優(yōu)化了Next.js內(nèi)部以提高冷啟動性能（速度提升高達40％，在Vercel上測試）。
- [改進] 對App Router增強了Jest支持。
- [改進] 重新設計了next dev的輸出。
- [改進] 服務端操作現(xiàn)在與完全靜態(tài)路由一起工作（包括使用ISR重新驗證數(shù)據(jù)）。
- [改進] 服務端操作不再阻止路由之間的導航。
- [改進] 服務端操作不能再觸發(fā)多個并發(fā)操作。
- [改進] 調(diào)用redirect()的服務端操作現(xiàn)在將其推入歷史堆棧而不是替換當前條目，以確保返回按鈕正常工作。
- [改進] 服務端操作為防止瀏覽器緩存添加了no-cache，no-store cache-control頭。
- [改進] 修復了導航后可能調(diào)用兩次服務端操作的錯誤。
- [改進] 提高了對具有服務端組件的Emotion CSS的支持。
- [改進] 支持scroll-behavior: smooth用于哈希URL更改。
- [改進] 在所有瀏覽器中添加了Array.prototype.at的Polyfill。
- [改進] 修復了next dev緩存處理多個并行請求時可能發(fā)生的競爭條件。
- [改進] 控制臺中的fetch輸出現(xiàn)在顯示跳過緩存的請求（緩存：SKIP）。
- [改進] usePathname現(xiàn)在正確地去除了basePath。
- [改進] next/image現(xiàn)在在App Router中正確地預加載圖像。
- [改進] not-found不再兩次渲染根布局。
- [改進] 現(xiàn)在可以克隆NextRequest（即new NextRequest(request)）。
- [改進] app/children/page.tsx現(xiàn)在正確地處理文字/children路由。
- [改進] 內(nèi)容安全策略現(xiàn)在支持預初始化腳本的nonce。
- [改進] 使用next/navigation中的重定向時現(xiàn)在支持basePath。
- [改進] 在Static Export中使用不受支持功能時改進了錯誤消息。
- [改進] 改進了遞歸readdir實現(xiàn)（速度提高了約3倍）。
- [改進] 修復了動態(tài)路由段中fallback：false之前引起的掛起請求問題。
- [改進] 修復了在請求已被取消時將信號傳遞給重新驗證請求導致請求失敗的錯誤。
- [改進] 刪除了404頁面上的fetch輪詢，改為使用websocket事件，避免在運行next dev時不必要的重新加載。
- [改進] performance.measure不再會導致水合不匹配。
- [改進] 修復了在編輯pages/_app時可能發(fā)生意外的完全重新加載的情況。
- [改進] ImageResponse現(xiàn)在擴展自Response，以改善類型檢查。
- [改進] 在next build中沒有頁面輸出時，不再顯示pages。
- [改進] 修復了在<Link>中忽略skipTrailingSlashRedirect的問題。
- [改進] 修復了開發(fā)模式下動態(tài)元數(shù)據(jù)路由重復的問題。
