在經過26次金絲雀發布和340萬次下載之后，現在，我們正式推出生產就緒的Next.js 7。

\\

• DX改進：啟動速度提高57％，重新編譯速度提高42％；\\t
• 使用react-error-overlay更好地報告錯誤；\\t
• 編譯管道升級：Webpack 4和Babel 7；\\t
• 標準化的動態導入；\\t
• 靜態CDN支持；\\t
• 較小的初始HTML載荷；\\t
• App和Page之間的React Context（服務器端渲染）。\

DX改進

\\

Next.js的主要目標之一是提供最佳的性能和開發者體驗。最新版本為構建和調試管道帶來了很多重大改進。

\\

得益于Webpack 4和Babel 7，以及我們對代碼庫做出的很多改進和優化，Next.js現在在開發過程中的啟動速度提高了57％。

\\

我們新增了增量編譯緩存，讓變更代碼的構建速度快了40％。

\\

以下是我們收集的一些示例數據：

\\

\\

因為使用了webpackbar，在開發和構建的同時可以看到更好的實時反饋：

\\

\\

使用react-error-overlay更好地報告錯誤

\\

準確地渲染錯誤對于良好的開發和調試體驗來說是至關重要的。到目前為止，我們可以渲染錯誤消息和堆棧跟蹤信息。我們在此基礎上更進一步，我們使用react-error-overlay來豐富堆棧跟蹤信息：

\\

• 準確的服務器端和客戶端錯誤位置；\\t
• 高亮顯示錯誤來源；\\t
• 完整的堆棧跟蹤信息。\

這是之前和之后的錯誤顯示比較：

\\

\\

另外，借助react-error-overlay，你只需單擊特定代碼塊就可以輕松打開文本編輯器。

\\

Webpack 4

\\

從發布第一個版本以來，Next.js一直使用Webpack來打包代碼和重用豐富的插件。Next.js現在使用了最新的Webpack 4，其中包含很多改進和bug修復。

\\

• 支持.mjs源文件；\\t
• 代碼拆分改進；\\t
• 更好的搖樹優化（刪除未使用的代碼）支持。\

另一個新功能是支持WebAssembly，Next.js甚至可以進行WebAssembly服務器渲染，這里有一個例子。

\\

CSS導入

\\

因為使用了Webpack 4，我們引入了一種從捆綁包中提取CSS的新方法，這個插件叫作mini-extract-css-plugin。

\\

mini-extract-css-plugin提供了@zeit/next-css、@zeit/next-less、@zeit/next-sass和@zeit/next-stylus。

\\

這些Next.js插件的新版本解決了與CSS導入相關的20個問題，例如，現在支持import()動態導入CSS：

\\\// components/my-dynamic-component.js\import './my-dynamic-component.css'\export default () =\u0026gt; \u0026lt;h1\u0026gt;My dynamic component\u0026lt;/h1\u0026gt;\\\// pages/index.js\import dynamic from 'next/dynamic'\const MyDynamicComponent = dynamic(import('../components/my-dynamic-component'))\export default () =\u0026gt; \u0026lt;div\u0026gt;\ \u0026lt;MyDynamicComponent/\u0026gt;\\u0026lt;/div\u0026gt;\\

一個重大改進是現在不再需要在pages/_document.js中添加以下內容：

\\\\u0026lt;link rel=\"stylesheet\" href=\"/_next/static/style.css\" /\u0026gt;\\

Next.js會自動注入這個CSS文件。在生產環境中，Next.js還會自動向CSS URL中添加內容哈希，當文件發生變更時，最終用戶就不會得到舊文件，并且能夠獲得不可變的永久緩存。

\\

簡而言之，要在Next.js項目中支持導入.css文件，只需要在next.config.js中注冊withCSS插件：

\\\const withCSS = require('@zeit/next-css')\module.exports = withCSS({/* my next config */})\\

標準化動態導入

\\

從版本3開始，Next.js就通過next/dynamic來支持動態導入。

\\

作為這項技術的早期采用者，我們必須自己編寫解決方案來處理import()。

\\

因此，Next.js逐漸缺失Webpack后來引入的一些功能，包括import()。

\\

例如，無法手動命名和捆綁某些文件：

\\\import(/* webpackChunkName: 'my-chunk' */ '../lib/my-library')\\

另一個例子是在next/dyanmic模塊之外使用import()。

\\

從Next.js 7開始，我們不再直接使用默認的import()，Next.js為我們提供了開箱即用的import()支持。

\\

這個變更也是完全向后兼容的。使用動態組件非常簡單：

\\\import dynamic from 'next/dynamic'\const MyComponent = dynamic(import('../components/my-component'))\export default () =\u0026gt; {\ return \u0026lt;div\u0026gt;\ \u0026lt;MyComponent /\u0026gt;\ \u0026lt;/div\u0026gt;\}\\

這段代碼的作用是為my-component創建一個新的JavaScript文件，并只在渲染\u0026lt;MyComponent/\u0026gt;時加載它。

\\

最重要的是，如果沒有進行渲染，\u0026lt;script\u0026gt;標記就不會出現在初始HTML文檔中。

\\

為了進一步簡化我們的代碼庫并利用優秀的React生態系統，在Next.js 7中，我們使用react-loadable重寫了next/dynamic模塊。這為動態組件引入了兩個很棒的新特性：

\\

• 使用next/dynamic的timeout選項設置超時；\\t
• 使用next/dynamic的delay選項設置組件加載延遲。例如，如果導入非常快，可以通過這個選項讓加載組件在渲染加載狀態之前等待一小段時間。\

Babel 7

\\

Next.js 6中就已經引入了Babel 7測試版。后來Babel 7穩定版本發布，現在，Next.js 7正在使用這個新發布的穩定版Babel 7。

\\

一些主要特性：

\\

• Typescript支持，在Next.js中可以使用@zeit/next-typescript；\\t
• 片段語法\u0026lt;\u0026gt;支持；\\t
• babel.config.js支持；\\t
• 通過overrides屬性將預設/插件應用于文件或目錄的子集。\

如果你的Next.js項目中沒有自定義Babel配置，那么就不存在重大變更。

\\

但如果你具有自定義Babel配置，則必須將相應的自定義插件/預設升級到最新版本。

\\

如果你從Next.js 6以下的版本升級，可以使用babel-upgrade工具。

\\

除了升級到Babel 7之外，當NODE_ENV被設置為test時，Next.js Babel預設（next/babel）現在默認將modules選項設置為commonjs。

\\

這個配置選項通常是在Next.js項目中創建自定義.babelrc的唯一理由：

\\\{\ \"env\": {\ \"development\": {\ \"presets\": [\"next/babel\"]\ },\ \"production\": {\ \"presets\": [\"next/babel\"]\ },\ \"test\": {\ \"presets\": [[\"next/babel\

總結

以上是生活随笔為你收集整理的Next.js 7.0正式发布：重新编译速度提高42％，支持WebAssembly的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。