成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端prerender-spa-plugin預(yù)渲染

godiscoder / 2627人閱讀

摘要：預(yù)渲染構(gòu)建階段生成匹配預(yù)渲染路徑的文件注意每個需要預(yù)渲染的路由都有一個對應(yīng)的。使用安裝中引入代碼打包目錄模板頁面要預(yù)渲染的頁面路由默認(rèn)掛在對象上，可以通過在預(yù)渲染頁面取值渲染時顯示瀏覽器窗口。

prerender-spa-plugin預(yù)渲染：構(gòu)建階段生成匹配預(yù)渲染路徑的 html 文件（注意：每個需要預(yù)渲染的路由都有一個對應(yīng)的
html）。構(gòu)建出來的 html 文件已有部分內(nèi)容。
prerender-spa-plugin使用

安裝prerender-spa-plugin

npm install prerender-spa-plugin --save

webpack.prod.config.js中引入

const PrerenderSPAPlugin = require("prerender-spa-plugin")
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, "../dist"), 
// outputDir: path.join(__dirname, "../prerendered"),
indexPath: path.join(__dirname, "../dist", "index.html"), 
routes: ["/mobile/home.html", "/mobile/doctor_team.html", "/mobile/about.html"], 
renderer: new Renderer({
inject: {
foo: "bar"
},
headless: false, 
renderAfterDocumentEvent: "render-active" 
// renderAfterElementExists: ".container", 
// renderAfterTime: 5000 
})
})
]

staticDir：代碼打包目錄

indexPath：模板頁面

routes：要預(yù)渲染的頁面路由

inject：默認(rèn)掛在window.__PRERENDER_INJECTED對象上，可以通過window.__PRERENDER_INJECTED.foo在預(yù)渲染頁面取值

headless：渲染時顯示瀏覽器窗口。對調(diào)試很有用。

renderAfterDocumentEvent：等到事件觸發(fā)去渲染，此處我理解為是Puppeteer獲取頁面的時機(jī)

renderAfterDocumentEvent 這個則很關(guān)鍵，這個是監(jiān)聽 document.dispatchEvent
事件，決定什么時候開始預(yù)渲染。需要在鉤子函數(shù)中觸發(fā)事件，如
new Vue({
 el: "#app",
 router,
 render: h => h(App),
 mounted () {
 // You"ll need this for renderAfterDocumentEvent.
 document.dispatchEvent(new Event("render-active"))
 }
});

renderAfterElementExists：等到dom元素出現(xiàn)時去渲染

renderAfterTime：5000ms后去渲染

webpack打包編譯

結(jié)合項目，執(zhí)行打包編譯命令

npm run build:prod

在dist目錄下生成以下頁面，雖然生成了兩層目錄，但是還是映射到"/mobile/home.html", "/mobile/doctor_team.html", "/mobile/about.html"

查看打包以后的頁面，body內(nèi)容已經(jīng)渲染好了

啟動http-server訪問http://127.0.0.1:8080/mobile/about.html，效果跟正常訪問一致

原理

prerender-spa-plugin 利用了 Puppeteer 的爬取頁面的功能。 Puppeteer 是一個 Chrome官方出品的 headlessChromenode 庫。它提供了一系列的 API, 可以在無 UI 的情況下調(diào)用 Chrome 的功能, 適用于爬蟲、自動化處理等各種場景。它很強(qiáng)大，所以很簡單就能將運行時的 HTML 打包到文件中。原理是在 Webpack 構(gòu)建階段的最后，在本地啟動一個 Puppeteer 的服務(wù)，訪問配置了預(yù)渲染的路由，然后將 Puppeteer 中渲染的頁面輸出到 HTML 文件中，并建立路由對應(yīng)的目錄。

圖片描述(最多50字)
具體代碼可以結(jié)合render-puppeteer下的代碼來看

圖片描述(最多50字)
在render.js中，啟動本地服務(wù)，通過page.goto依次訪問

http://localhost:8000/mobile/about.html，

http://localhost:8000/mobile/home.html

http://localhost:8000/mobile/doctor_team.html

通過page.content()獲取html

總結(jié)

結(jié)合項目實踐了下這個插件，也有不少坑

1.在config/index.js中assetsPublicPath原先寫的是/dist,導(dǎo)致預(yù)渲染的頁面body沒有渲染出來，是空白頁面，改成/就能預(yù)渲染出來，但是這樣導(dǎo)致不需要預(yù)渲染的頁面資源路徑不對

2.該插件在webpack此版本下不支持路由懶加載，

"webpack": "^4.6.0",

網(wǎng)上提到npm i [email protected]可以解決，果然升級了webpack版本后支持路由懶加載

3.在需要請求動態(tài)數(shù)據(jù)的頁面中，預(yù)渲染只能保證靜態(tài)部分不更改，如果不想寫死，要做動態(tài)數(shù)據(jù)代理，webpack的devserver代理數(shù)據(jù)無效，需要用nginx或者其他代理工具代理線上數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101779.html

相關(guān)文章

  • 處理 Vue 單頁面 SEO 的另一種思路

    摘要：官方地址設(shè)置單頁面信息，如果需要單頁面，可以和形成更優(yōu)的配合單頁面應(yīng)用在前端正大放光彩。隨著單頁面應(yīng)用的普及，人們在感受其帶來的完美的用戶體驗，極強(qiáng)的開發(fā)效率的同時，也似乎不可避免的要去處理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （設(shè)置vue 單頁面meta info信息，如果需要單頁面SEO，可以和 prer...

    shiweifu 評論0 收藏0

  • 處理 Vue 單頁面 SEO 的另一種思路

    摘要：官方地址設(shè)置單頁面信息，如果需要單頁面，可以和形成更優(yōu)的配合單頁面應(yīng)用在前端正大放光彩。隨著單頁面應(yīng)用的普及，人們在感受其帶來的完美的用戶體驗，極強(qiáng)的開發(fā)效率的同時，也似乎不可避免的要去處理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （設(shè)置vue 單頁面meta info信息，如果需要單頁面SEO，可以和 prer...

    yangrd 評論0 收藏0

  • prerender-spa-plugin 預(yù)渲染插件的使用說明

    摘要：眾所周知單頁面應(yīng)用不利于，為了解決這個問題網(wǎng)上所給出的個解決方案服務(wù)器端渲染預(yù)渲染由于頁面較少，且預(yù)渲染相對于比較簡單，于是選擇預(yù)渲染頁面，預(yù)渲染可以極大的提高網(wǎng)頁訪問速度。 眾所周知單頁面應(yīng)用不利于SEO，為了解決這個問題網(wǎng)上所給出的2個解決方案**1、SSH服務(wù)器端渲染2、預(yù)渲染**由于頁面較少，且預(yù)渲染相對于SSH比較簡單，于是選擇預(yù)渲染頁面，預(yù)渲染可以極大的提高網(wǎng)頁訪問速度。而...

    孫吉亮 評論0 收藏0

  • Vue現(xiàn)有項目改造為Nuxt項目

    摘要：好了，項目啟動了，目錄結(jié)構(gòu)也清楚了，接下來就是整個現(xiàn)有項目的遷移了目前正在改造項目，文章尚未寫完，會抽時間不定期的繼續(xù)更新項目的改造過程及分享改造過程中遇到的問題 公司項目，最初只為了實現(xiàn)前后端分離式開發(fā)，直接選擇了vue框架進(jìn)行開發(fā)，然而現(xiàn)在項目基本完成了，發(fā)現(xiàn)蜘蛛根本就抓取不到網(wǎng)站數(shù)據(jù)，搜索引擎搜出來，都是一片空白沒有數(shù)據(jù)，需要對項目做SEO優(yōu)化。 本人第一次接觸SEO的優(yōu)化，完全...

    Invoker 評論0 收藏0

  • react 項目構(gòu)建

    摘要：配置方式找到文件如需添加路由則在里面添加，同時需要后端更改配置除了上面的路徑，其他路徑全部指向單頁應(yīng)用多路由預(yù)渲染指南使用說明源碼為方便快速構(gòu)建項目，本例所有配置的代碼均放在項目中。 寫在前面 每次構(gòu)建react項目的時候都會配置一大堆東西，時間久了就會忘記怎么配置。為了方便自己記憶也為了其他開發(fā)者在構(gòu)建react應(yīng)用時能夠快速開發(fā)，故作此記錄。 本項目基于 create-react-...

    ACb0y 評論0 收藏0

發(fā)表評論

0條評論

godiscoder

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<