【第十二期】Vapper - 一個基於 Vue 的 SSR 框架

時間 2019-11-08

標籤第十二期 vapper 一個基於 vue ssr 框架简体版

原文原文鏈接

若是你正在使用 Vue 作同構的項目，那麼 Nuxt 以及 Quasar Framework 都是一個不錯的選擇。可是今天我要介紹的是由水滴前端自主研發的一個基於 Vue 的 SSR 框架：Vapperjs。html

Vapperjs 是一個開源項目：github.com/vapperjs/va…前端

Vapper 的特性

我猜大部分同窗在看到這篇文章以後的第一個疑問應該是：爲何不直接使用 Nuxt 或者 Quasar Framework 等框架，而是又造了一個輪子？接下來咱們將嘗試經過介紹 Vapper 的特性來解答這些問題，來看看 Vapper 有什麼不一樣之處。vue

目標一：盡最大的努力讓 SSR 應用的開發體驗更接近 SPA

如何才能作到這一點呢？咱們須要分幾個方面來考慮：webpack

一、項目結構：

與其說項目結構，更準確的說法應該是文件的組織方式。咱們知道 Nuxt 是基於文件系統的路由，這意味着它與傳統 SPA 應用在文件的組織方式上就必然存在差距，你須要按照其規範(或規定的方式)去編寫頁面(或組件)。然而，咱們在開發 SPA 應用時徹底沒有這些限制，所以咱們但願有一個框架可以讓咱們不受任何限制的去組織文件，就像普通 SPA 應用同樣。git

要實現這一點其實並不難，由於 Vue SSR 的官方文檔教給你的就是這種方式，所以 Vapper 就在此基礎上的封裝github

二、數據預取：

用過 Nuxt 的同窗必定對其提供的 asyncData 組件選項很熟悉，你須要在 asyncData 函數內作數據預取，可是它有一些限制，例如該組件選項不能用於任何組件，只能在路由組件中使用(或 pages)，而且在 asyncData 函數內是不能訪問組件實例對象的。web

數據預取，說白了就是請求數據，咱們在開發 SPA 應用時歷來沒有由於請求數據而關心過是否只能在路由組件中請求數據，更沒有關心過請求數據時不能訪問組件實例的問題(這裏咱們假設是在 mounted 或 created 鉤子中進行數據預取)。所以咱們但願有一個框架可以讓你免除這些心智負擔，並盡最大努力讓同構應用的數據預取更加接近 SPA 應用。vue-cli

Vapper 讓這一切成爲了可能，詳情能夠閱讀官方文檔，瞭解在 Vapper 中如何進行數據預取：Data prefetch架構

經過在如上兩方面的努力，咱們就幾乎作到了讓開發 SSR 應用的體驗更加接近開發 SPA 應用。app

目標二：只負責必要的 webpack 配置

不少人力富裕的公司或團隊基本都會開發一個所謂的腳手架工具，可是絕大部分團隊開發的腳手架工具都只是實現了 1% 功能的 Vue CLI3，實際上在 Vue CLI3 現有的架構下，理論上你徹底能夠實現任何業務特定場景的需求，而不須要本身再編寫一個腳手架。

Vue CLI3 的架構借鑑了 Poi，Poi 也是一個優秀的 webpack 管理工具，一個優秀的項目腳手架，所以咱們但願有這樣一個 SSR 框架，它自己只負責必要的 webpack 配置，即只負責 SSR 相關的 webpack 配置，其餘的配置交給這些優秀的腳手架管理。這麼作的好處就是雙向的，即 Vapper 爲這些腳手架提供了 SSR 能力，同時這些 webpack 管理工具的能力也成爲了 Vapper 的能力，一箭雙鵰。

Vapper 中有一個 Configer 的概念，簡單的說就是兩個模塊：

這讓 Vapper 與這些優秀的 webpack 管理工具結合成爲了可能，並且更重要的是就算你不適用 Vue CLI3 或者 Poi，你也能夠編寫本身的 Configer 從而集成到你本身的腳手架中，文檔能夠閱讀這裏：編寫 Configer。

目標三：路由級別的控制能力

什麼是路由級別的控制能力呢？爲了便於理解，我貼一張官網的圖片：

一句話，咱們但願訪問不一樣的路由會根據須要採用不一樣的處理方式，例如咱們但願當訪問路由 /home 時應用服務端渲染(SSR)；可是當訪問路由 /foo 時直接返回 SPA 資源給用戶；甚至當咱們訪問路由 /bar 時，咱們能夠把預渲染好的內容發送給客戶端。

之因此要這麼作，是由於有的時候，並不是全部項目咱們都須要進行 SSR，並且咱們能夠對部分頁面進行預渲染，這些都是提高服務性能的有效途徑。

在 Vapper 中你能夠輕鬆作到這一點，你能夠經過在路由 meta 中指定 ssr: true/false 來選擇開啓或關閉 SSR，例如：

new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/home',
      component: () => import('./components/Home.vue'),
      meta: {
        // 應用 SSR
        ssr: true
      }
    },
    {
      path: '/foo',
      component: () => import('./components/About.vue'),
      meta: {
        // 關閉 SSR，當用戶訪問 /foo 時將會獲得 SPA 資源
        ssr: false
      }
    }
  ]
})
複製代碼

就是這麼簡單直率，不得不提的一點是，若是全部路由都沒有應用 SSR，那麼你的項目和 SPA 應用沒有任何區別。換句話說，若是你想將現有 SPA 項目逐步遷移爲 SSR 項目，那麼 Vapper 很是適合你。

對於預渲染要稍微複雜一點，你須要安裝 @vapper/plugin-prerender 插件，而後在 vapper.config.js 中進行以下配置：

// vapper.config.js
module.exports = {
  plugins: [
    [
      '@vapper/plugin-prerender',
      {
        // 寫下要進行預渲染的路由
        routes: ['/foo']
      }
    ]
  ]
}
複製代碼

這樣在構建階段，vapper 會對 /foo 進行預渲染並生成 html 文件，當用戶訪問此路由時，會直接將該 html 文件發送給客戶端。須要注意的是，只有開啓了 SSR 的路由才支持預渲染，固然這是合理的。

目標四：錯誤處理方式

Vapper 讓錯誤的處理方式更爲靈活，當錯誤發生時咱們有兩種選擇，除了展現自定義的錯誤頁面以外，還能夠選擇回退的 SPA 模式。這麼作的好處是顯而易見的。由於有些錯誤可能只發生於服務端，或者有些錯誤是非致命的，對於這樣的錯誤發生時，咱們能夠選擇回退到 SPA 模式，這樣用戶就能夠繼續使用咱們的應用，這對於一些注重轉化率的場景是相當重要的。