Next.js 7.0正式发布：重新编译速度提高42％，支持WebAssembly
在經過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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端水印
- 下一篇： 洛谷 1541 乌龟棋