国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

godiscoder / 2614人閱讀

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

prerender-spa-plugin預(yù)渲染：構(gòu)建階段生成匹配預(yù)渲染路徑的 html 文件（注意：每個(gè)需要預(yù)渲染的路由都有一個(gè)對(duì)應(yīng)的
html）。構(gòu)建出來(lái)的 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：模板頁(yè)面

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

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

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

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

renderAfterDocumentEvent 這個(gè)則很關(guān)鍵，這個(gè)是監(jiān)聽 document.dispatchEvent
事件，決定什么時(shí)候開始預(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)時(shí)去渲染

renderAfterTime：5000ms后去渲染

webpack打包編譯

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

npm run build:prod

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

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

啟動(dòng)http-server訪問(wèn)http://127.0.0.1:8080/mobile/about.html，效果跟正常訪問(wèn)一致

原理

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

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

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

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

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

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

通過(guò)page.content()獲取html

總結(jié)

結(jié)合項(xiàng)目實(shí)踐了下這個(gè)插件，也有不少坑

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

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

"webpack": "^4.6.0",

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/101779.html

相關(guān)文章

  • 處理 Vue 單頁(yè)面 SEO 的另一種思路

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

    shiweifu 評(píng)論0 收藏0

  • 處理 Vue 單頁(yè)面 SEO 的另一種思路

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

    yangrd 評(píng)論0 收藏0

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

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

    孫吉亮 評(píng)論0 收藏0

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

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

    Invoker 評(píng)論0 收藏0

  • react 項(xiàng)目構(gòu)建

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

    ACb0y 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<