Nuxt 2.0正式釋出:支援 Webpack 4、ES module
首先,我們先來看自 Nuxt 建立以來的一些統計資料:
Google Analytics
-
約 1200 萬次頁面訪問;
-
約 75 萬獨立訪問者;
-
訪問者最多的 5 個國家:美國、中國、英國、日本和俄羅斯。
GitHub
-
96 次釋出;
-
約 14860 個 star;
-
約 3900 個問題和 PR(97% 已關閉)。
-
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。