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%。
-
本地服務(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%!
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>
組件的高級用例,包括:
-
處理
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)用r
edirect()
的服務(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)] 控制臺中的
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í)將信號傳遞給重新驗(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ù)的問題