Nuxt 2.0正式釋出：支援 Webpack 4、ES module

摘要： 首先，我們先來看自 Nuxt 建立以來的一些統計資料： Google Analytics 約 1200 萬次頁面訪問； 約 75 萬獨立訪問者； 訪問者最多的 5 個國家：美國、中國、英國、日...

首先，我們先來看自 Nuxt 建立以來的一些統計資料：

Google Analytics

• 約 1200 萬次頁面訪問；

• 約 75 萬獨立訪問者；

• 訪問者最多的 5 個國家：美國、中國、英國、日本和俄羅斯。

 GitHub

• 96 次釋出；

• 約 14860 個 star；

• 約 3900 個問題和 PR（97% 已關閉）。

 Twitter

• 13 萬 5 千多個關注者（https://twitter.com/nuxt_js）；

• 900 多個推文。

 NPM

• 約 1200 萬次下載；

• 53 個官方模組（https://www.npmjs.com/org/nuxtjs）。

新版本的主要變化：

支援 Webpack 4

光是這一改進就值得專門寫一篇文章進行介紹：

• Webpack 4 速度非常快；

• 模式、#0CJS 和合理的預設值；

• 不再需要 CommonsChunkPlugin；

• WebAssembly 支援；

• 引入模組型別以及.mjs 支援。

其他變化：

• 客戶端捆綁包的預設開發工具是預設的 eval，它的速度是最快的。

• 預設情況下啟用模組串聯（作用域提升）優化。

• 刪除了實驗選項 build.dll。它不太穩定，況且 Webpack 4 已經足夠快了。

遷移提示：使用者不需要修改專案中的任何一行程式碼，升級到 Nuxt 2 後，一切都將神奇般地自動幫你遷移完畢。

不再需要 vendors

Nuxt 2 仍然存在 vendors 塊，但會自動處理它，而且效率更高。從這個版本開始，不再使用 CommonsChunkPlugin，所以使用者不必在專案中顯式定義 vendors。Nuxt 會自動將核心軟體包（vue、vue-router、babel-runtime 等）新增到指定的 Cache Group 中，這有助 Webpack 以最有效的方式拆分程式碼。

遷移提示：從 nuxt.config.js 中刪除 vendors。如果你的專案中包含了 vendors，可以安全地刪除它們。如果你是模組作者，可以保留 this.addVendor() 為舊版本提供支援。下一版本可能會顯示棄用警告。

完全控制塊拆分

Nuxt 嘗試提供開箱即用的最有效的程式碼拆分功能，不過，現在使用者可以通過 build.splitChunks 選項來完全控制程式碼拆分，並可以選擇性地禁用路由的非同步塊。

重大變更：預設情況下，Nuxt 不再拆分佈局塊。它們將與主入口點一起載入，就像 Nuxt Core、Plugins、Middleware 和 Store 一樣。使用者可以通過 build.splitChunks.layouts: true 來啟用佈局拆分。另外，為了更好地控制 Webpack 塊拆分，可以使用 build.optimization.splitChunks 選項。

重大變更：對於生產版本的構建，不再使用檔名作為塊名稱的一部分（/_nuxt/pages/foo/bar.[hash].js 變成了 [hash.js]）。使用者可以使用 build.optimization.splitChunks.name：true 強制恢復啟用檔名稱（如果未指定，在 dev 和 --analyze 模式下仍然會啟用檔名稱）。

重大變更：為了減少非同步請求，Webpack 預設不拆分執行時（manifest）塊，並將其移到主塊中。使用者可以通過 build.optimization.runtimeChunk：true 來啟用執行時拆分。

注意：Nuxt 的預設設定是以一些最佳實踐為基礎，並基於實際專案的基準測試進行了優化。建議使用者在每次做出更改後使用 nuxt build --analyze 分析 bundle。

遷移提示：保持預設設定。對你的實際專案進行基準測試，然後根據你的需要精心定製配置選項。

Vue Loader 15 和 mini-css-extract-plugin**

vue-loader（https://vue-loader.vuejs.org/en/）可以將.vue 檔案解析為可執行的 JS/CSS 和 HTML。Vue-Loader 15 使用完全不同的新架構進行了重寫，可以將主 Webpack 配置中定義的任何規則應用於 *.vue 檔案中的語言塊。

對於 CSS 提取，使用了一個新的外掛 mini-css-extract-plugin，它支援按需載入 CSS 和 SourceMaps（CSS 拆分），並且是基於 Webpack v4 的新功能（模組型別）而構建。

因為這兩個外掛都是新的，所以預計在最終釋出 2.0.0 版本之前，可能會出現一些不一致。這兩個外掛已經在不同場景中進行了全面測試，它們表現得非常好！

Nuxt 和 ES module

現在使用者可以通過 std/esm（https://github.com/standard-things/esm）在 nuxt.config.js 中匯入和匯出 Middleware 和模組中。std/esm 是一個快速、生產就緒、零依賴的軟體包，用於在 Node 6+ 中啟用 ES 模組。

CLI 改進

開發者需要優雅的開發經驗來開發出色的軟體，於是 Nuxt 團隊重新設計了很多有關 CLI 的東西。

在使用 nuxt dev 時，即使 CLI 顯示 Nuxt 已準備就緒，使用者仍然可能感覺到構建延遲。這是因為運行了兩次 Webpack。一次是為客戶端，一次是為 SSR 捆綁，但第二次執行被隱藏起來。現在構建被並行化，同時開發了 WebpackBar（https://github.com/nuxt/webpackbar），可以檢視構建進度，還有其他很多功能。

現在，預設情況下隱藏所有除錯訊息（可以通過設定環境變數 DEBUG = nuxt:* 來啟用），同時為構建器和生成器更智慧、更好地顯示訊息。

使用者經常要求 Nuxt 支援測試和 CI（持續整合）環境。Nuxt 2 將自動檢測 CI 和測試環境，並切換到 minimalCLI 特殊模式，在該模式下包含較少的列印訊息。

移除 Nuxt 1.0 中棄用的特性

• 移除 context.isServer 和 context.isClient（使用 process.client 和 process.server 代替）；

• 移除 build.extend() 中的 options.dev（使用 options.isDev 代替）；

• 移除了模組中的 tappable hooks（nuxt.plugin()）（使用新的鉤子系統）；

• 刪除了模組的回撥（使用非同步或返回 Promise）。

實驗性的多執行緒編譯器

這個特性將在 Webpack 5 中正式釋出，不過使用者現在可以通過 options.build.cache: true 來啟用 cache-loader 和 Babel 快取，以及通過 options.build.parallel: true 來啟用 thread-loader。

SPA 改進

Nuxt.js 是 Vue.js 開發人員的通用框架，它既可以用於全域性環境（與伺服器端渲染一起），也可以用於客戶端（單頁應用程式，SPA）。Nuxt 重新設計了與 SPA 有關的一些重要方面。

SPA 最重要的元件之一是頁面載入指示器。Nuxt 團隊對其進行了重新設計，如果出現任何問題，就會進入錯誤狀態，並在大約 2 秒後自適應地顯示在 DOM 中。如果 SPA 應用程式載入足夠快，可以避免不必要的螢幕閃爍。還添加了 aria 標籤，幫助螢幕閱讀器和搜尋引擎正確檢測啟動畫面。

出於 SEO 方面的原因以及支援 HTTP2 推送，SPA 模式使用特殊的 Meta 渲染器將 nuxt.config.js 中定義的所有元標記新增到頁首中。同時還為 SPA 模式添加了 options.render.bundleRenderer.shouldPrefetch 和 options.render.bundleRenderer.shouldPreload。

重大變更：預設情況下禁用 shouldPrefetch。很多使用者反應存在不必要的頁面塊預取，尤其是在中型專案中。此外，為了方便除錯，非生產模式下預設禁用所有不必要的資源提示。

create-nuxt-app

create-nuxt-app 是 Nuxt 官方的腳手架工具，用於生成各種模板，如專案啟動模板、Express 模板等。有了 create-nuxt-app，使用者可以選擇與伺服器端框架（如 Express、Koa、Adonis 等）整合，或者與 UI 框架（如 Vuetify、Bootstrap、Tailwind 等）整合，或者也可以使用 axios 模組。

現在你可以更快地建立一個 Nuxt 新專案了。

遷移指南

使用者可以通過 yarn add nuxt@^2.0.0 或 npm install nuxt@^2.0.0 進行升級。下面是完整的遷移步驟指南：

• 仔細閱讀釋出公告；

• 如果使用的是 VCS，請在新分支上進行程式碼提交和推送；

• 停止所有的 Nuxt 程序；

• 可選：刪除所有.nuxt、node_modules、yarn.lock 和 package.lock.json 目錄和檔案；

• 確保使用的是最新版本的 Node（建議使用 Node 10.x 和 NPM 5 以上版本）；

• 在 nuxt.config.js、modules 和 serverMiddleware 中使用 import/export 代替 require；

• 確保沒有在 package.json 中顯式設定 Webpack 和 Vue 依賴，如果有，請將它們升級到與 Nuxt 匹配的版本；

• 使用 npm 和 yarn 進行安裝；

• 可選：使用 npm outdated 或 yarn outdated，並小心手動更新所有依賴項；

• 如果使用了 CDN 部署系統，請確保更新 CI/CD 配置，使用.nuxt/dist/client 代替.nuxt/dist。

參考連結

• https://medium.com/@nuxt_js/nuxt-js-2-0-webpack-4-esm-modules-create-nuxt-app-and-more-6936ce80d94c

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

• https://github.com/nuxt/nuxt.js/releases/tag/v2.0.0

活動推薦

ArchSummit 全球架構師峰會將於 12 月 7-8 日在北京國際會議中心舉辦，會議專題聚集了微服務金融架構、微服務架構、資料基礎平臺建設、短視訊架構、區塊鏈、資訊隱私安全等話題。邀請了阿里巴巴、Netflix、百度、LinkedIn 等公司的技術專家來分享。

大會 8 折報名中，立減 1360 元，有任何問題歡迎諮詢票務經理 Lachel- 灰灰，電話 / 微信：17326843116。