Nuxt 2 即將來臨

原文出處： 🚀 Nuxt 2 is coming! Oh yeah! – Nuxt.js – Medium

 [https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67]

 

---

1.4.0發布25天后，Nuxt2就即將來臨。超過330次提交，320次更改文件，8,200次添加和7,000次刪除（不包括其他nuxt repositories）！好吧，似乎很多變化，但不用擔心，我們會盡最大努力減少breaking changes的數量，更多的關注於穩定性，性能和更好的開發體驗。我們對這些變化進行了總結：

🏎 Webpack 4 (Legato)

僅這個改進就值得一篇專門的文章。有什么新特性呢？

• 🏎 Webpack 4, is FAST!

• 😍 Mode, #0CJS, and sensible defaults

• ✂ Goodbye CommonsChunkPlugin

• 🔬WebAssembly Support

• 🐐 Module Type’s Introduced + .mjs support

想了解更多信息請看 Sean T. Larkin的 這篇文章 以及Webpack Release Notes.

其他改進:

• Default dev tool for client bundle is the webpack default eval which is the fastest option.

• Module Concatenation (Scope Hoisting) optimization is enabled by default.

• 刪除了實驗屬性 build.dll。它不穩定，而webpack 4速度已經足夠快。

💡 遷移提示: 好消息是，你不需要更改項目中的任何代碼。只要升級到Nuxt 2，所有東西都會立刻遷移。

👋 棄掉了venders

我們以前一直使用 vendors chunk，這次發布后，我們不再使用CommonsChunkPlugin，所以不必明確指定 vendors。Nuxt自動添加了核心的packages(包括vue,vue-router,babel-runtime...)到Cache Group中。這使得webpack可以用最合理的方式拆分你的代碼。

💡 遷移提示: 如果你在項目的 nuxt.config.js中配置了 vendors，直接去掉即可。 如果你是一個module author,你可以繼續使用 this.addVendor()，但我們可能會有棄用提示。

✂️ chunk splitting的完全控制

以前，Nuxt被選擇用於代碼分割。盡管Nuxt試圖提供最有效的分割，但現在可以使用 build.splitChunks選項完全控制它，並且可以選擇禁用每個路由的異步塊。

⚠️ BREAKING CHANGE: nuxt默認不再拆分layout chunks，它們將像nuxt core, plugins, middleware和store一樣被加載進主入口。你也可以通過 build.splitChunks.layouts:true使得layout拆分。另外為了更好的控制* webpack *塊分割，你可以使用 build.optimization.splitChunks選項。

⚠️ BREAKING CHANGE: 對於生產環境，我們不再使用文件名作為 chunk names 的一部分( /_nuxt/pages/foo/bar.[hash].js變成 [hash.js])這樣容易讓別人意外發現工程內部的漏洞。你也可以使用 build.optimization.splitChunks.name:true強制開啟。 (如果未指定，names仍然在 dev和 --analyze 模式下啟用)

⚠️ BREAKING CHANGE: webpack默認不會拆分runtime（manifest）chunk以減少異步請求而是將其移入main chunk。你可以使用 build.optimization.runtimeChunk:true啟用。

⚠️ 注意: Nuxt的默認設置基於最佳實踐，並在與實際項目應用之后進行了優化。建議閱讀 Tobias Koppers寫的RIP CommonsChunkPlugin並在每次更改之后使用 nuxt build--analyze.

💡 遷移提示: 保持默認值。根據您的需求對您的實際項目進行基准測試並根據需要定制選項。

🔥 Vue Loader 15 and mini-css-extract-plugin

如果您沒有聽過vue-loader, 其實他就是把 .vue 文件解析為可運行的JS/CSS and HTMl。Vue-Loader 15進行了完全的重寫，它使用了一種完全不同的新架構，能夠將webpack配置中定義的任何規則應用於 *.vue文件內。

對於CSS抽取，我們使用一個新的插件 mini-css-extract-plugin，它支持CSS和SourceMaps（CSS splitting）的按需加載，並構建在新的webpack v4特性（module types）上。

兩者都是新的，所以在我們最終的2.0.0版本發布之前，預計會有一些不一致。

Nuxt 💖 ES modules

現在你可以在 nuxt.config.js中使用 import and export , 服務器middleware和modules要感謝std/esm. A fast, production ready, zero-dependency package to enable ES modules in Node 6+ by John-David Dalton.

🖥️ CLI 改善

我們非常感謝開發人員，並相信他們需要優雅的開發經驗才能創造美好的事物，所以我們重寫了很多關於CLI的東西。

在使用 nuxt dev時, 即使CLI顯示Nuxt准備就緒，您也可能感覺到構建延遲。這是因為webpack運行兩次。一次用於客戶端，一次用於SSR捆綁。第二個是隱藏的！因此，我們創建了 WebpackBar ，使得開發模式更加順暢。

現在，所有debug信息都默認隱藏（可以使用 DEBUG=nuxt:* 環境變量啟用），相反，我們會為builder和generator展示更好的信息。

Nuxt經常要求的增強功能支持Test and CI（持續集成）環境。 Nuxt 2自動檢測配置項和測試環境，並將切換到一個稱為minimalCLI的特殊模式，其中包含更少的詳細消息。

🤷 Nuxt 1.0中刪除的功能

• Removed context.isServer and context.isClient (Use process.client and process.server)

• Removed options.dev in build.extend() (Use options.isDev)

• Removed tappable hooks ( nuxt.plugin()) in modules (Use new hooks system)

• Removed callback for modules (Use async or return a Promise)

🎌 Experimental Multi-Thread Compiler

雖然這將是webpack 5的官方功能，但你可以使用實驗性的 options.build.cache：true來啟用cache-loader和babel cache以及 options.build.parallel：true啟用thread-loader。

⭕ SPA改善

Nuxt.js是Vue.js開發人員的通用框架，這意味着它可以用於SSR或僅用於客戶端（單頁面應用）模式。我們重新修改了SPA的一些重要內容。

SPA重要的組件之一是頁面加載指示器。它被重新設計，如果發生任何問題就會進入錯誤狀態，並會在約2秒后自適應地開始在DOM中顯示。如果SPA應用加載速度夠快，這將有助於不必要的閃屏。我們還添加了aria標簽，以幫助屏幕閱讀器和搜索引擎正確檢測啟動畫面。

SPA模式使用特殊的meta渲染器將 nuxt.config.js中定義的所有meta標簽添加到頁面標題中，以實現SEO和HTTP2支持！我們也為SPA模式增加了 options.render.bundleRenderer.shouldPrefetch和 options.render.bundleRenderer.shouldPreload

⚠️ BREAKING CHANGE: shouldPrefetch默認是禁用的。許多用戶反饋不需要的頁面塊prefetch，尤其是在中型項目上。此外，所有不必要的資源提示在非生產模式下都會被禁用，以便於調試。

🐰 等不及發布了吧? 使用nuxt-edge!

您可以通過刪除 [nuxt][12]並安裝 [nuxt-edge][13]NPM package來幫助我們試驗最新功能。隨意留下您的評論標上 [edge]。

對於yarn，你可以使用這個命令安裝: yarn add nuxt@npm:nuxt-edge (Thanks to the Benoît Emile’s suggestion)

💭 期待你的反饋 :)

Nuxt 2 即將來臨。我們正在做最后的檢查，優化和測試以便發布更加穩定的版本。同時我們期待您的反饋 https://nuxtjs.cmty.io