建立在React之上的知名JavaScript框架Next.js釋出了最新的13.5版本,這個版本主要改進開發體驗和效能。Next.js 13.5在本地開發效能和穩定性都有所提升,本地伺服器啟動速度與熱模組替換速度皆明顯提升。此外,這個版本還減少記憶體使用量,同時加快熱門套件匯入速度。

Next.js 13新加入App Router,官方在Next.js 13.4針對該功能更新,以提升應用程式的效能和可靠性,並於Next.js 13.5再次改進App Router。App Router是利用React新功能React Server Components(RSC),所發展的建置應用程式新範式,簡單來說,該功能是基於Next.js原本檔案系統Pages Router的延伸,可讓開發者在不重新載入整個頁面的情況下,切換到不同視圖或是部分,其提供了一個更高效的方法來組織和處理路由。

官方把更新重點擺在App Router上,並進行了許多最佳化,像是Next.js現在可以更好地處理資料儲存,透過快取和最小化速度慢的工作,減少不必要的操作,同時最佳化耗時的檔案系統操作。Next.js也會在編譯過程增量走訪樹結構,也就是在更新和處理資料結構時,系統不會重新走訪整棵樹,而是針對有變動的部分進行處理,以大幅提高效率和速度。

Next.js 13.5還會推延非必要的阻塞式同步呼叫,並且自動配置大型圖示資源庫。相較Next.js 13.4,新版本的本機伺服器啟動速度提高22%,熱模組替換快速刷新的速度提高29%,記憶體使用減少40%。App Router是目前官方推薦的應用程式建置方法,建議新專案和應用程式採用,而對於舊的應用程式,則也建議逐步整合App Router。目前兩種路由方式可以在同一應用程式中共存。

Next.js 13.5還最佳化套件匯入效能,當在使用大型圖示或是元件函式庫時,可以提高本地開發效率和加速生產環境的冷啟動。過去開發者需要手動設定匯入函式庫模組,而現在Next.js會自動處理這項工作,而許多知名的函式庫,像是@mui/icons-material和lodash現在也只會載入真正會用到的模組。

官方參考社群的意見,新增一個實驗性函式unstable_getImgProps(),這個函式允許開發者不使用<Image>元件,以更靈活的方式處理和顯示圖片。

熱門新聞

Advertisement