服務(wù)端渲染VS預(yù)渲染

1.服務(wù)端渲染：將完整的 html 輸出到客戶端，又被認(rèn)為是‘同構(gòu)’或‘通用’
?????? 點(diǎn)：首次渲染快（無(wú)需等待所有js都完成下載）利于SEO，節(jié)能
?????? 缺點(diǎn)：開(kāi)發(fā)受限
?????????需要處于Node.js server運(yùn)行環(huán)境；
?????????更多的服務(wù)器負(fù)載（占用更大的CPU資源）
2.預(yù)渲染：對(duì)特定路由生成靜態(tài)HTML文件，前端作為一個(gè)完全靜態(tài)的站點(diǎn)
?????無(wú)需使用web服務(wù)器實(shí)時(shí)動(dòng)態(tài)編譯HTML
?????改善少數(shù)頁(yè)面的SEO,可采用預(yù)渲染
?????若網(wǎng)站有成百上千條路線，預(yù)編譯會(huì)非常緩慢（此情況慎用）

預(yù)渲染

必須是history模式哦

1.核心插件

npm install prerender-spa-plugin --save-dev

2.在build/webpack.prod.conf.js中進(jìn)行配置

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
plugins: [
   new PrerenderSPAPlugin({
        //生成文件的路徑，這個(gè)目錄只能有一級(jí)。
    staticDir: path.join(__dirname, '../dist'),
    //必需，要渲染的路由文件。
    routes: ['/', '/index'],
    //必須，要使用的實(shí)際渲染器，沒(méi)有則不能預(yù)編譯
    renderer: new Renderer({
        inject: {
            foo: 'bar'
        },
        //等待渲染，直到檢測(cè)到指定元素。
        //例如，在項(xiàng)目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` 
        renderAfterDocumentEvent: 'render-event',
        headless: false //渲染時(shí)顯示瀏覽器窗口。對(duì)調(diào)試很有用。  
    })
   })
]

3.main.js中進(jìn)行配置

new Vue({
    el: '#app',
    router,
    store,
    components: {
        App
    },
    template: '<App/>',
    mounted() {
        document.dispatchEvent(new Event('render-event'));
    }
})

4.打包c(diǎn)npm run build，搭建node本地服務(wù)跑起來(lái)或者 在線上（后臺(tái)需要重定向）
5.上圖

配置前

配置后

完美結(jié)束，這個(gè)提高了SEO！

原文作者：匆匆那年_海，博客主頁(yè)：http://www.itdecent.cn/u/910c0667c515
95后前端漢子，愛(ài)編程、優(yōu)秀、聰明、理性、沉穩(wěn)、智慧的程序猿一枚。