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