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

• 本地服務(wù)器啟動(dòng)速度提高 22%：使用App和Pages Router可以更快地進(jìn)行迭代。
• HMR（快速刷新）速度提高 29%：在保存更改時(shí)進(jìn)行更快的迭代。
• 內(nèi)存使用量減少 40%：在運(yùn)行next start 時(shí)測量。
• 優(yōu)化的包導(dǎo)入：使用流行的圖標(biāo)和組件庫時(shí)進(jìn)行更快的更新。
• next/image 改進(jìn)：支持<picture>標(biāo)簽、暗模式等。
• 修復(fù)了超過 438 個(gè)錯(cuò)誤！

改善啟動(dòng)和快速刷新時(shí)間

App Router 的采用在持續(xù)增加，根據(jù) HTTP Archive 對前1000萬個(gè)網(wǎng)站進(jìn)行的統(tǒng)計(jì)數(shù)據(jù)來看，其增長速度達(dá)到了每月 80%。

自 Next.js 13.4 版本以來，Next.js 團(tuán)隊(duì)的重點(diǎn)一直是改進(jìn) App Router 應(yīng)用的性能和可靠性。將13.4與13.5版本進(jìn)行比較，在一個(gè)新的應(yīng)用上，可以看到以下改進(jìn)：

• 本地服務(wù)器啟動(dòng)速度提高 22%。
• HMR（快速刷新）速度提高 29%。
• 內(nèi)存使用量減少 40%。

通過以下優(yōu)化方法實(shí)現(xiàn)了這種性能提升：

• 通過緩存或減少慢速操作來減少工作量。
• 優(yōu)化昂貴的文件系統(tǒng)操作。
• 在編譯過程中實(shí)現(xiàn)更好的增量樹遍歷。
• 將不必要的阻塞同步調(diào)用改為懶加載。
• 自動(dòng)配置大型圖標(biāo)庫。

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

在繼續(xù)迭代和改進(jìn)當(dāng)前打包工具性能的同時(shí)，Next.js 團(tuán)隊(duì)還在開發(fā) Turbopack（beta）以進(jìn)一步提高性能。在13.5版本中，next dev --turbo現(xiàn)在支持更多功能。

優(yōu)化的包導(dǎo)入

此版本對包導(dǎo)入進(jìn)行了令人興奮的突破，改善了在使用大型圖標(biāo)或組件庫以及其他重新導(dǎo)出了數(shù)百或數(shù)千個(gè)模塊的依賴項(xiàng)時(shí)的本地開發(fā)性能和生產(chǎn)冷啟動(dòng)速度。

之前，添加了modularizeImports的支持，使開發(fā)者能夠配置在使用這些庫時(shí)如何解析導(dǎo)入。在13.5版本中，用optimizePackageImports替代了這個(gè)選項(xiàng)，它不需要指定導(dǎo)入映射，而是會(huì)自動(dòng)優(yōu)化導(dǎo)入。

像@mui/icons-material、@mui/material、date-fns、lodash、lodash-es、ramda、react-bootstrap、@headlessui/react、@heroicons/react和lucide-react等庫現(xiàn)在都可以自動(dòng)優(yōu)化，只加載實(shí)際使用的模塊，同時(shí)方便編寫帶有很多命名導(dǎo)出的導(dǎo)入語句。

next/image 改進(jìn)

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

• 處理background-image或image-set。
• 使用canvas的context.drawImage()或new Image()時(shí)進(jìn)行操作。
• 使用<picture>媒體查詢來實(shí)現(xiàn)藝術(shù)方向或明/暗模式圖片。
• 利用<picture>元素的媒體查詢功能，實(shí)現(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/作為占位圖像，這些圖像不會(huì)被模糊處理。

其他改進(jìn)

自從13.4.0版本以來，我修復(fù)了超過438個(gè)錯(cuò)誤，并進(jìn)行了各種改進(jìn)，包括：

• [文檔] 關(guān)于表單和變異的新文檔。
• [文檔] 關(guān)于服務(wù)端和客戶端組件的新文檔。
• [文檔] 關(guān)于內(nèi)容安全策略和非ces的新文檔。
• [文檔] 關(guān)于緩存和重新驗(yà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主機(jī)名的支持。
• [功能] App Router現(xiàn)在支持Yarn PnP。
• [功能] 服務(wù)器操作中添加了對redirect()的支持。
• [功能] 通過創(chuàng)建項(xiàng)目使用Bun的支持：bunx create-next-app。
• [功能] 中間件和邊緣運(yùn)行時(shí)中的草稿模式支持。
• [功能] 現(xiàn)在中間件中支持cookies()和headers()。
• [功能] Metadata API現(xiàn)在在Twitter卡片中支持summary_large_image。
• [功能] RedirectType現(xiàn)在從next/navigation導(dǎo)出。
• [功能] 添加了Playwright的實(shí)驗(yàn)性測試模式。
• [改進(jìn)] 重構(gòu)了next start，能夠處理比之前多達(dá)1062%的請求量。
• [改進(jìn)] 優(yōu)化了Next.js內(nèi)部以提高冷啟動(dòng)性能（速度提升高達(dá)40％，在Vercel上測試）。
• [改進(jìn)] 對App Router增強(qiáng)了Jest支持。
• [改進(jìn)] 重新設(shè)計(jì)了next dev的輸出。
• [改進(jìn)] 服務(wù)端操作現(xiàn)在與完全靜態(tài)路由一起工作（包括使用ISR重新驗(yàn)證數(shù)據(jù)）。
• [改進(jìn)] 服務(wù)端操作不再阻止路由之間的導(dǎo)航。
• [改進(jìn)] 服務(wù)端操作不能再觸發(fā)多個(gè)并發(fā)操作。
• [改進(jìn)] 調(diào)用redirect()的服務(wù)端操作現(xiàn)在將其推入歷史堆棧而不是替換當(dāng)前條目，以確保返回按鈕正常工作。
• [改進(jìn)] 服務(wù)端操作為防止瀏覽器緩存添加了no-cache，no-store cache-control頭。
• [改進(jìn)] 修復(fù)了導(dǎo)航后可能調(diào)用兩次服務(wù)端操作的錯(cuò)誤。
• [改進(jìn)] 提高了對具有服務(wù)端組件的Emotion CSS的支持。
• [改進(jìn)] 支持scroll-behavior: smooth用于哈希URL更改。
• [改進(jìn)] 在所有瀏覽器中添加了Array.prototype.at的Polyfill。
• [改進(jìn)] 修復(fù)了next dev緩存處理多個(gè)并行請求時(shí)可能發(fā)生的競爭條件。
• [改進(jìn)] 控制臺(tái)中的fetch輸出現(xiàn)在顯示跳過緩存的請求（緩存：SKIP）。
• [改進(jìn)] usePathname現(xiàn)在正確地去除了basePath。
• [改進(jìn)] next/image現(xiàn)在在App Router中正確地預(yù)加載圖像。
• [改進(jìn)] not-found不再兩次渲染根布局。
• [改進(jìn)] 現(xiàn)在可以克隆NextRequest（即new NextRequest(request)）。
• [改進(jìn)] app/children/page.tsx現(xiàn)在正確地處理文字/children路由。
• [改進(jìn)] 內(nèi)容安全策略現(xiàn)在支持預(yù)初始化腳本的nonce。
• [改進(jìn)] 使用next/navigation中的重定向時(shí)現(xiàn)在支持basePath。
• [改進(jìn)] 在Static Export中使用不受支持功能時(shí)改進(jìn)了錯(cuò)誤消息。
• [改進(jìn)] 改進(jìn)了遞歸readdir實(shí)現(xiàn)（速度提高了約3倍）。
• [改進(jìn)] 修復(fù)了動(dòng)態(tài)路由段中fallback：false之前引起的掛起請求問題。
• [改進(jìn)] 修復(fù)了在請求已被取消時(shí)將信號(hào)傳遞給重新驗(yàn)證請求導(dǎo)致請求失敗的錯(cuò)誤。
• [改進(jìn)] 刪除了404頁面上的fetch輪詢，改為使用websocket事件，避免在運(yùn)行next dev時(shí)不必要的重新加載。
• [改進(jìn)] performance.measure不再會(huì)導(dǎo)致水合不匹配。
• [改進(jìn)] 修復(fù)了在編輯pages/_app時(shí)可能發(fā)生意外的完全重新加載的情況。
• [改進(jìn)] ImageResponse現(xiàn)在擴(kuò)展自Response，以改善類型檢查。
• [改進(jìn)] 在next build中沒有頁面輸出時(shí)，不再顯示pages。
• [改進(jìn)] 修復(fù)了在<Link>中忽略skipTrailingSlashRedirect的問題。
• [改進(jìn)] 修復(fù)了開發(fā)模式下動(dòng)態(tài)元數(shù)據(jù)路由重復(fù)的問題。