Next.js 7 釋出，重新編譯速度提高 42%

Webpack · 發表 2018-09-20 08:57:00

摘要： Next.js 7.0.0 釋出了，Next.js 是一個用於在服務端渲染 React 應用程式的簡單框架。主要更新包括： DX 改進：啟動速度提高 57％，重新編譯速度提高 42％使用 react-error-overlay 更好地報告錯誤升...

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 修復，包括：

支援 .mjs 原始檔
程式碼拆分改進
更好的 tree-shaking（刪除未使用的程式碼）支援

此外還有 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 的記憶體佔用，效果如下：

更多內容檢視 ofollow,noindex" target="_blank">釋出公告。

下載地址：