[prerender-spa-plugin]--微型Vue專案的靜態化利器

mykurisu發表於2018-03-22

最近和同事寫了個公司的PC官網,綜合個人開發習慣、週期以及需求,我最終選擇用vue-cli來快捷開發(因為之前已經寫好了基於vue-cli的二次定製腳手架)。上線之後,老大說了一句,還是改回靜態頁吧,SPA的SEO太差啦。這...

本文會涉及到的內容--

  • 使用prerender之前的境況介紹
  • 使用prerender的姿勢(踩坑)
  • 小插曲:nginx的重定向
  • 總結

使用prerender之前

我們的官網是特別“純正”的vue-cli專案,也就是說這是個用webpack進行打包的單頁應用。

在路由方面選擇的是vue-router,mode是hash模式,因為並不需要考慮IE瀏覽器以及移動端瀏覽器(特別是微信這個小妖精),所以並沒有特別注意路由這一塊的配置。

在頁面開發方面,由於是兩人開發,所以我傾向單個頁面分離成多個元件的開發模式,這樣既不互相干擾,後續改動或複用也相對靈活。

balabala...沒過幾天,我們的官網順利上線啦,除了url裡面會帶一個"#"之外,貌似沒啥不妥的地方。直到老大在群裡吐槽url醜&非靜態頁,然後讓我改用靜態頁T T

這讓我陷入沉思...

  • 改用HTML/CSS/JS重寫一次?
  • 用Nuxt進行SSR?
  • 還有啥辦法...

也不知道為啥,突然想起來之前看過一個預渲染的webpack外掛:)

prerender-spa-plugin登場

prerender-spa-plugin是什麼?不太瞭解的童鞋可以傳送門傳走看看--prerender-spa-plugin Github && vue服務端渲染中的介紹

history模式

將原來的hash模式改成了history模式,拋棄了醜醜的"#"並且也為prerender做鋪墊,如果是hash模式的話可能沒有辦法正常的進行預渲染。

webpack配置

因為我們用的是新版的vue-cli,webpack配置檔案已經沒有暴露出來了,我們需要通過修改vue.config.js來更改我們的webpack配置(其中應該是藉助了webpack-merge外掛來實現配置的整合)

const path = require('path')
const PrerenderSpaPlugin = require('prerender-spa-plugin')
// ...
// ...
configureWebpack: {
    plugins: [
        new PrerenderSpaPlugin(
            // npm run build的輸出目錄
            path.resolve(__dirname, './raw'),
            // 需要進行預渲染的頁面
            ['/', '/about'], {
                captureAfterTime: 5000,
                maxAttempts: 10,
            }
        )
    ]
}
複製程式碼

上述配置大意是到相應的目錄,根據router的資訊將有關的頁面預先載入渲染成靜態頁面,並且將靜態頁面以獨立資料夾的形式儲存下來。

下圖是沒有prerender的檔案目錄↓

[prerender-spa-plugin]--微型Vue專案的靜態化利器

可以看到,和普通的單頁應用打包輸出一樣,一個index.html入口,動態渲染各個頁面。

使用prerender之後的目錄則是這樣的↓

[prerender-spa-plugin]--微型Vue專案的靜態化利器

多出了一個about資料夾,裡面有一個index.html檔案,這裡就是'/about'頁面的靜態頁,這樣我們通過url訪問時就是直接訪問about的靜態頁,而不需要再讓瀏覽器編譯這個頁面。

這樣一來,搜尋引擎就可以直接爬到我們頁面的所有內容,而不是一個單頁應用的啟動頁!

然後在根目錄的index.html也變成'/'頁面的靜態頁,這樣一來就完成了我們官網頁面的靜態化,就是這麼簡單~

因為prerender-spa-plugin的核心人員也是vue的核心人員,所以在vue專案裡面用起來顯得十分順暢,不過如果是大型專案的話可能還是要往SSR方向去走。

下圖為chrome中訪問官網首頁的原始碼--

[prerender-spa-plugin]--微型Vue專案的靜態化利器

小插曲:nginx的重定向

在完成某個線上專案的重構之後需要注意一些"蝴蝶效應"--

以我們的官網為例,之前一些公司介紹被百科收錄了,收錄的來源連結是舊的靜態頁連結--"xxx/about.html",一訪問就涼了,頁面已經不存在了。

一開始打算寫個空的html負責跳轉,但是後面想想這樣不利於頁面的seo,所以就想到是不是可以利用nginx的重定向解決這個問題。

這裡其實花了不少時間,剛開始寫的時候是在location裡面對相應的路徑進行重定向,但是發現效果不理想。後面,東查查西查查,發現可以用rewrite來解決這個問題。

server {
    listen ......
    ......

    rewrite ^about.html https://targetlink.com/about/ permament;

    location / {...}
}
複製程式碼

在nginx裡面加入rewrite這行就可以將"xxx/about.html"這個連結永久重定向至目標url了,就不需要再寫一個“跳板”頁面了。

總結

關於SPA的SEO是永恆的話題,解決的方案其實不多,因為既然決定了使用SPA就代表該專案對SEO並沒有強需求,但是如果是本文的背景下,我們就需要思考最便捷、無痛的解決方案。

SSR自然是首當其衝的方案,但是實在是傷筋動骨,得不償失,不如重寫成靜態頁。後面發現預渲染這個方案十分適合我們,所以就嘗試了一下這個方案,在嘗試這個方案的過程中,我也試了下gitlab的自動部署這又是另外一個坑了,在近期應該會有另外一篇文章來講講這個坑~

[prerender-spa-plugin]--微型Vue專案的靜態化利器

相關文章