Next.js 7.0.0 發布了,Next.js 是一個用於在服務端渲染 React 應用程式的簡單框架。
主要更新包括:
DX 改進:啟動速度提高 57%,重新編譯速度提高 42%
使用 react-error-overlay 更好地報告錯誤
升級的編譯管道:Webpack 4 和 Babel 7
標準化動態 import
靜態 CDN 支持
更小的初始 HTML 有效負載
應用程式和頁面之間的 React Context
DX 改進
此版本為構建和調試管道帶來了許多重大改進,Webpack 4、Babel 7 與其它改進、優化,使得 Next.js 現在在開發過程中的啟動速度提高了 57%,同時由於新的增量編譯緩存,重新編譯代碼的速度提高了 42%,下邊是收集的測試數據:
同時,現在可以通過 webpackbar 看到更好的實時反饋:
使用 react-error-overlay 更好地報告錯誤。目前 Next 會顯示錯誤消息及其堆棧跟蹤,但是此次更新更進一步,使用 react-error-overlay 功能豐富了堆棧跟蹤,如下所示:
在使用 react-error-overlay 時只需單擊特定代碼塊即可輕鬆打開文本編輯器。
Webpack 4
自第一版發布以來,Next.js 一直由 Webpack 提供支持,用於打包代碼並重新使用豐富的插件和擴展生態系統。新版本 Next.js 由 Webpack 4提供支持,其中包含許多改進和 bug 修復,包括:
此外還有 WebAssembly 支持,Next.js 甚至可以伺服器端渲染 WebAssembly
使用 Webpack 4,引入了一種從 bundle 中提取 CSS 的新方法 mini-extract-css-plugin,zeit/next-css、@ zeit/next-less、@ zeit/next-sass 和 @ zeit/next-stylus 現在由 mini-extract-css-plugin 提供支持。
從版本 3 開始,Next.js 通過 next/dynamic 支持動態導入,作為這項技術的早期採用者,必須編寫自己的解決方案來處理 import(),因此,Next.js 開始偏離 Webpack 後來為其引入的支持,並且缺少某些功能,也就是 Next.js 不支持 Webpack 之後引入的一些 import() 功能。從 Next.js 7 開始,不再觸及默認的 import() 行為。
更小的初始 HTML 有效負載
此前初始有效載荷約為 1.62kB,Next.js 7 中進行了優化,現在為 1.5kB,減少了 7.4%,使頁面更加精簡,下邊是測試數據:
靜態 CDN 支持
在 Next.js 5 中引入了 assetPrefix 支持,這是一種使 Next.js 自動從某個位置(通常是 CDN)加載資源的方法,Next.js 7 中,更改了 .next 的目錄結構以匹配 url 結構:
https://cdn.example.com/_next/static/<buildid>/pages/index.js// mapped to:.next/static/<buildid>/pages/index.js支持應用程式和頁面之間的 React Context
從 Next.js 7 開始,支持 pages/_app.js 和頁面組件之間的新 React context API。以前,無法在伺服器端的頁面之間使用 React context,原因是 Webpack 保留了內部模塊緩存而不是使用 require.cache,Next.js 7 中編寫了一個自定義 Webpack 插件來改變這種行為以在頁面之間共享模塊實例。這樣做不僅允許使用新的 React context,還可以在頁面之間共享代碼時減少 Next.js 的內存佔用,效果如下:
更多內容查看發布公告。
下載地址: