Next.js 7 發布,重新編譯速度提高 42%

2021-01-15 開源中國

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 的內存佔用,效果如下:


更多內容查看發布公告。

下載地址:

相關焦點

  • Kotlin 1.2.70 發布,增量編譯速度提高 7 倍
    Kotlin 1.2.70 已發布,這是 Kotlin 1.2 的一個新的 bug 修復和工具更新版本。
  • Next.js 8.0 正式發布,新增無伺服器功能
    Next.js 8.0 已於幾天前發布了正式版,目前最新的版本為 8.0.1(https://github.com/zeit/next.js
  • Per.js 2.5 版本發布,執行速度超快的 JS 響應式框架
    Per.js 2.5版本今天發布了,那麼讓我們來看看這次版本更新了哪些內容:修復data屬性bug修復for屬性響應式bug
  • Per.js 2.6 版本發布,執行速度超快的 JS 響應式框架
    Per.js 2.6版本今天發布了,那麼讓我們來看看這次版本更新了哪些內容:dom方法增加info屬性,用來定義值,同時方法中的this指向info
  • Per.js 2.6.1 版本發布,執行速度超快的 JS 響應式框架
    Per.js 2.6.1版本今天發布了,那麼讓我們來看看這次版本更新了哪些內容:
  • TKoa 1.0.1 發布,TypeScript 版的 Node.js Koa 框架
    更新信息: npm增加編譯好的 javascript 文件T-Koa 介紹
  • 編譯原理之 PEG.js
    引言在編譯原理之手寫一門解釋型語言[1]中我們全手動寫了一個 Parser 來解析我們的腳本,實際上有現成的工具可以更加方便地完成這個工作,比如 PEG.js。該工具通過解析語法規則來自動生成 Parser,開發人員只需要專注於編寫語法規則即可。
  • Per.js 2.2 正式發布,中國速度最快的JS大型響應式框架?
    Per.js 2.2版本今天發布了,那麼讓我們來看看這次2.2版本更新了哪些內容:
  • Deno並不是下一代Node.js
    剛才修改了一下,添加了對 Node.js 和 Deno 發布時間的標註。Node.js 和 Deno 分別是 Ryan Dahl 在 2009 年和 2018 年,基於當年***的前端技術開發的非瀏覽器 JavaScript 運行時。
  • Per.js 2.3 發布,超快執行速度的 JavaScript 響應式框架
    Per.js 2.3版本今天發布了,那麼讓我們來看看這次2.2版本更新了哪些內容:除了do之外的其他方法支持無括號構造,例如Per.use(),
  • 助力 SSR,使用 concent 為 Next.js 應用加點料
    Hello next這裡我們將使用create-next-app命令來安裝一個基礎的next示例應用npx create-next-app hello-next執行完畢後,可以看到一個如下的目錄結構|____public|____pages| |____ _app.js   // next應用默認的根組件| |____index.js   // 默認首頁| |____api        // api路由文件| | |____hello.js
  • Unladen Swallow項目計劃:提高Python速度5倍
    Google的Python工程師發布了一個新項目,目的是讓Python的速度提高至少5倍。新項目名叫Unladen Swallow,意圖尋找新的Python解釋程序虛擬機,新的JIT編譯引擎。第一季度的目標是實現25-35%的性能提升,目前已經完成,代碼發布在Google Code 網站上。
  • Vue.js以業務為中心的常見面試題
    v-model是vue.js的一條指令,實現數據的雙向綁定雙向數據綁定的原理:vue.js使用es5提供的屬性特性功能,結合發布者-訂閱者模式,通過Object.defineProperty()為各個屬性定義get,set特性方法,在數據發送改變時給訂閱者發布消息,觸發相應的監聽回調
  • Kotlin VS Java 編譯速度大比拼,到底誰更快?
    但有些人不想試用Kotlin,因為他們擔心它編譯可能沒有Java快。 這個關注點絕對是正確的,如果變得編譯很慢,沒有人願意轉換他們的代碼。 所以,讓我們編譯Lock App試一下 ,然後我把它轉換成Kotlin。 我不會試圖比較一行代碼的編譯速度; 相反,我將嘗試回答將代碼從Java轉換為Kotlin是否會影響其總體構建的時間。
  • ThinkJS 2.0:使用ES6/7全部特性開發Node項目
    ThinkJS是一款使用ES6/7特性全新開發的Node.js MVC框架,使用ES7中async/await,或者ES6中的Generator Function特性徹底解決了Node.js中異步嵌套的問題。同時吸收了國內外眾多框架的設計理念和思想,讓開發Node.js項目更加簡單、高效。使用ES6/7特性來開發項目可以大大提高開發效率,是趨勢所在。
  • Node.js 9發布,Node.js 8也被長期支持
    【IT168 資訊】Node.js Foundation近日發布了Node.js JavaScript運行時的第9個版本,與此同時Node.js 8也會被長期支持使用。
  • PHP與Node.js:一個史詩般開發者的分享
    PHP也加快了速度,zippy即時編譯器提供的答案比以前更快。現在的PHP 7.0和HHVM都為Chrome和Node.js提供了相同的即時優化引擎V8。不僅如此,HHVM還有一個Hack,它對諸如lambda,泛型和集合等複雜編程特性提供完全支持。  有人稱讚Node.js和JavaScript,也有人對PHP的代碼基礎和穩定性感到滿意。
  • ...發布,TypeScript 版的 Node.js Koa 框架 - OSCHINA - 中文開源...
    儘管它是基於 typescript 編寫,但是你依然還是可以使用一些 node.js 框架和基於 koa 的中間件。不僅如此,你還可以享受 typescript 的類型檢查系統和方便地使用 typescript 進行測試!
  • Nodejs 內容管理系統 DoraCMS 2.1.4 發布
    自上個版本開始,我一直在考慮如何讓DoraCMS更加靈活,於是我很快想到了支持插件,以這個為初衷,也找了一些資料,最終決定使用eggjs重構應用,eggjs 是阿里打造的為企業級框架和應用而生的服務端框架,通過之前對eggjs基礎的了解,發現它涉及到的框架和插件機制非常符合我的初衷,於是嘗試在 DoraCMS 2.1.3 的基礎上改造,發現其實也不是很困難。
  • 基於Nest.js + React 的開發框架 Notadd 2.0 Beta2 發布
    前言    大多數 node.js 框架都沒解決架構問題,使得 node.js 沒能像 spring