vue预渲染之prerender-spa-plugin解析(一)

最新推荐文章于 2024-09-07 09:26:16 发布
最新推荐文章于 2024-09-07 09:26:16 发布
阅读量1.2w 收藏 10
点赞数 5
分类专栏： html5学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vv_bug/article/details/84593052
版权
本文介绍了Vue预渲染的概念，旨在优化页面加载速度，减少SPA应用的白屏时间。通过prerender-spa-plugin插件，利用puppeteer库在构建时生成静态HTML，实现预渲染。文章详细讲解了插件的工作流程，并提供了在项目中集成和配置prerender-spa-plugin的步骤，最终展示预渲染效果。
摘要由CSDN通过智能技术生成

前言:这几天一直看怎么样优化页面加载速度,一个页面的加载等待时间很长的话,确实很不友好,反正如果是app的话,我会直接卸载的,所以各个厂商为了能让用户尽快的看到页面内容做了一系列的操作(预渲染、ssr、同构等等),我们今天来看一下预渲染.

什么是预渲染?
为什么需要用预加载呢?
以一个vue的spa(单页面)应用为例,我们用打包工具打包完毕后,我们的页面大概是这样的:

在这里插入图片描述
然后我们运行下页面后:
在这里插入图片描述

我们加载页面的时候,浏览器的渲染包含:html的解析、dom树的构建、cssom构建、javascript解析、布局、绘制,以上面例子看来,当解析到javascript的时候才回去触发vue的渲染,然后元素挂载到id为app的div上,这个时候我们才能看到我们页面的内容,所以即使vue渲染机制很快我们仍然能够看到一段时间的白屏情况,我们当然希望是加载页面的时候就可以看到内容了,而无需等待长时间的渲染,为了解决spa应用出现的白屏情况,我们需要在加载js之前做一下页面的预渲染,这样用户就能尽可能快的看到页面内容.

github上已经有一些预渲染框架了,原理都差不多,我这里就以prerender-spa-plugin为例了,我们来一步一步解析一下.

先看一下官网的解释:

This is the stable 3.x version of prerender-spa-plugin based on puppeteer. If you’re looking f

最低0.47元/天 解锁文章
vv_小虫
关注
专栏目录
vue预渲染之prerender-spa-plugin解析(二)
vv_bug
12-06 1万+
前面我们有介绍了什么是预渲染、使用场景、然后简单的介绍了预渲染的集成过程,感兴趣的童鞋可以去看一下vue预渲染之prerender-spa-plugin解析(一),这一节我们重点来研究一下prerender-spa-plugin的源码. 附上prerender-spa-plugin的github地址: https://github.com/chrisvfritz/prerender-spa-plu...
vue 项目预渲染（prerender-spa-plugin）
热门推荐
吾日三省吾身：高否？富否？帅否？ 否！否！否！ 安心上班吧……
06-03 1万+
服务器端渲染 vs 预渲染 (SSR vs Prerendering) 如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如/,/about,/contact等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以...
Puppeteer-Renderer: 基于Puppeteer的无头浏览器渲染服务
最新发布
gitblog_00706的博客
09-07 335
Puppeteer-Renderer: 基于Puppeteer的无头浏览器渲染服务 puppeteer-rendererPuppeteer(Chrome headless node API) based web page renderer项目地址:https://gitcode.com/gh_mirrors/pu/puppeteer-renderer 项目介绍 Puppeteer-Rendere...
vue使用prerender-spa-plugin预渲染达到SEO优化
观千剑而后识器，操千曲而后晓声。
11-11 3525
传统页面和框架开发的区别 传统html是通过a标签跳转来作为切换的，每一个页面都是一个html，这样百度很容易抓取到的，也能顺着a链接到你的子级页面。 像vue、react、angular开发的都是spa应用，他只有一个页面index，他们都是内加载，动态加载切换路由的，所以你再多页面百度蜘蛛只能爬到首页，这就是spa的一大痛点 解决方案 说完了区别说下怎么解决这个问题，目前我所了解的两种： vue.js官网提供的SSR（服务端渲染）这种方案呢学习成本高，对于刚开始的新手来说可能有点难度（也包括我..
prerender-spa-plugin
weixin_44230807的博客
06-08 137
prerender-spa-plugin 前端预渲染
【开发小记】vue项目预渲染（prerender-spa-plugin）
GUANYX的博客
09-18 1803
（3）预渲染：构建阶段生成匹配预渲染路径的html文件（注意：每个需要预渲染的路由都有一个对应的html—），构建出来的html文件已经有静态数据，需要ajax数据部分未构建。（2）服务端渲染：用户访问url，服务端根据访问路径请求所需数据，拼接成html字符串，返回给前端，前端接收到html时已有当前url下的完整页面；（3）低版本浏览器：用户的浏览器可能不支持我们的使用的js特性，预渲染或者服务端渲染能够让用户至少能看见首屏的内容，而不是一个空白的网页。有可能出现白屏，且SEO不友好。
prerender-spa-plugin 复杂vue项目踩坑
2301_81336632的博客
07-08 391
Unable to prerender all routes! 报错解决 prerender-spa-plugin 本地打包报错解决
vue-cli单页面预渲染seo-prerender-spa-plugin操作
10-14
预渲染插件 `prerender-spa-plugin` 正是为此目的设计的。它可以在构建过程中生成预渲染的HTML文件，以便搜索引擎可以看到页面的初始内容。以下是使用 `prerender-spa-plugin` 的详细步骤： 1. 安装插件： 如果你...
vue-cli-plugin-prerender-spa:通过预渲染Vue应用程序来增强SEO。 由prerender-spa-plugin提供支持
05-14
vue-cli-plugin-prerenderspa 使用零配置将prerender-spa-plugin添加到您的Vue应用程序。 寻找共同维护者：我将继续维护该项目，但是我仍然希望在某些问题上获得帮助，并且随着它越来越受欢迎，通常可以帮助我保持...
vue单页面seo(prerender-spa-plugin,vue-meta-info)
01-13
`prerender-spa-plugin` 是一个Vue CLI插件，用于在构建时预先渲染Vue.js应用程序的特定路由。预渲染意味着在服务端生成静态的HTML文件，这些文件包含了预先填充的数据，使得搜索引擎能够读取和索引页面内容。这大大...
Vue-cli使用prerender-spa-plugin插件预渲染Vue服务端渲染
細水、長流√的专栏
03-15 845
前言：使用vue-cli打包项目一般为spa项目，众所周知单页面应用不利于SEO，有ssr和预渲染两种解决方案，这里我们只讨论预渲染。此教程使用的prerender-spa-plugin版本和vue版本 "prerender-spa-plugin": "^3.4.0", "vue": "^2.5.17", vue-cli有2.0和3.0版本，解决方法是不一样的，这里我们要分开讨论。 vue...
vue3.x使用prerender-spa-plugin预渲染达到SEO优化
富朝阳的博客
05-17 4477
prerender-spa-plugin它所做的预渲染就是当vue-cli构建的项目进行npm run build 的时候，会按照路由的层级进行动态渲染出对应的html文件，这样爬虫在爬取页面的时候就不会再是一个简简单单的 index.html 入口文件了。
【Vue】预渲染之prerender-spa-plugin解析，方便搜索引擎的抓取
weixin_44899940的博客
06-08 2065
预渲染之prerender-spa-plugin解析，方便搜索引擎的抓取
vue 预渲染 prerender-spa-plugin
weixin_30780649的博客
08-26 310
最近项目上线要做运营，vue单页面做运营很不友好 一开始用的这个配置 const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer const webpackConfig = merge(baseWebpackC...
Vue SPA项目SEO优化之预渲染Prerender-spa-plugin
weixin_56659504的博客
04-09 541
目的 由于基于Vue的SPA项目普通的爬虫无法爬取项目的静态文本的内容，通过预渲染插件prerender-spa-plugin解决vue的SPA项目的SEO问题。 可以看到项目编译后的index.html中只有一些HTML和js，css文件的引用，而无关于内容的静态文本。当然你也可以添加meta的keyword和descrption,去简答的描述一些关于网站的内容。 curl xxxx.com // 返回的结果发现只有简单的HTML和js引用，无相关的静态文本 使用过程 Vue预渲染插件Prerende
vue使用预渲染prerender-spa-plugin
豪先生的博客
04-12 2439
前言：vue单页面对seo不友好，所以我打算通过预渲染来解决下seo问题。 目前我知道有2种方法, （1）SSR渲染（服务器） （2）prerender-spa-plugin插件预渲染（部分路由）（好像不能全部路由） 在这里我使用的是第二个方法 1、安装插件prerender-spa-plugin npm install prerender-spa-plugin --save // or 2个中选1个方法安装 npm install prerender-spa-plugin --save
预渲染插件prerender-spa-plugin使用总结
weixin_34411563的博客
08-01 1723
最近两周刚刚接手工程化的工作，领导希望能够集成一个可以预渲染html的插件来解决webpack生成的空白模板问题。 通过调研发现webpack有一个prerender-spa-plugin的插件完全可以满足需求，故将这个插件集成到我们内部的构建流程中。整个过程还是有很多坑的，主要我对node、webpack这些还是小白的阶段，所以犯了很多错误，特意记录一下。 为什么要使用prerender-spa...
vue 解决seo优化之预渲染prerender-spa-plugin
huangpb的博客
12-26 1733
最全、最详细的解释请看prerender-spa-plugin 插件 Github 解决SEO(Search Engine Optimization),首屏问题 , 页面较少，且预渲染相对于SSR比较简单，预渲染可以极大的提高网页访问速度。而且配合一些meat插件，完全可以满足SEO需求。 预渲染流程 预渲染原理 在webpack打包结束并生成文件后（after-emit hook），会启动一个server模拟网站的运行，用puppeteer（谷歌官方的 headless 无头浏览器）访问.
使用prerender-spa-plugin实现vue预渲染
九段刀客的博客
04-10 378
初始化 创建一个项目 vue create test 添加预渲染依赖 npm prerender-spa-plugin -D 代码 vue.config.js const PrerenderSPAPlugin = require("prerender-spa-plugin"); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require("path"); module.exports = { configur
vue预渲染vue-cli-plugin-prerender-spa
08-21
Vue预渲染是指在构建Vue应用程序时，将页面提前渲染成静态HTML文件，以便在服务器端优化SEO和提升加载速度。引用中介绍了一种使用vue-cli-plugin-prerender-spa的方法来实现这个功能。 要使用vue-cli-plugin-prerender-spa，您可以按照以下步骤操作： 1. 首先，确保您的Vue应用程序使用了vue-cli。如果没有，请先安装vue-cli，并创建一个新的Vue项目。 2. 安装vue-cli-plugin-prerender-spa插件，可以通过运行以下命令来完成： ``` vue add prerender-spa ``` 3. 安装完成后，您可以在Vue项目的根目录下找到一个新的文件夹，名为prerender，其中包含了预渲染的配置文件prerender.config.js。您可以在这个文件中配置需要预渲染的路由和其他相关设置。 4. 根据您的需求，编辑prerender.config.js文件，指定需要预渲染的路由，并进行其他必要的配置。 5. 运行以下命令来构建预渲染的静态HTML文件： ``` npm run build ``` 6. 构建完成后，您将在dist文件夹中找到预渲染的静态HTML文件，可以将这些文件部署到服务器上，或者使用它们来进行SEO优化。 引用中的内容可以给您提供更详细的vue-cli-plugin-prerender-spa的使用说明和配置示例。希望这些信息能对您有所帮助。 : https://github.com/chrisvfritz/prerender-spa-plugin : https://www.npmjs.com/package/vue-cli-plugin-prerender-spa : https://github.com/ml4a/ml4a-guides/blob/master/notebooks/simple_image_classification_with_pytorch.md<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-cli单页面预渲染seo-prerender-spa-plugin操作](https://download.csdn.net/download/weixin_38627234/12924216)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue-cli-plugin-prerender-spa:通过预渲染Vue应用程序来增强SEO。 由prerender-spa-plugin提供支持](https://download.csdn.net/download/weixin_42134094/18687118)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [毕设项目：基于SpringBoot+Vue前后端分离 实现的宿舍管理系统](https://download.csdn.net/download/qq_35831906/88227375)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值