优化不优化的话不利于爬虫渲染,好家伙这可牛逼了SSR

博客写完了,到了要上线时候才想起来要优化不优化的话不利于爬虫的抓取这样就没办法排名靠前啊~预渲染有个好处用个库就可以完成了~~要不是搜索到了一篇浏览量300的大佬文章我今天都搞不定,因为这个库最新版是4年前的了,有些人可以用可是我不懂啊,卡了我一下午我就不喜欢它了。还好通过那大佬的文章提到了一个新的库,我就尝试了一下目前写了7个接口-往后会不断持续的增加欢迎大家猜一下

写完博客,快要上线的时候才想起,如果不优化,爬虫爬不上去,没办法排在前列~~ 不过我对这方面的优化不是很了解,就简单的看一下吧。

渲染主要分为(CSR)客户端和(SSR)服务器。

但是vue是CSR,没啥可查源码的。情况不妙。这对爬虫不利。

在这里插入图片描述

下午,各种百度发现SSR渲染和预渲染都可以生成静态HTML。这种传统的 HTML 静态页面对爬虫非常有利。无论如何,我需要渲染的页面并不多。详情页。

于是我看了一下SSR服务端的渲染,伙计,这太棒了,好吧我承认我太笨了,学不会~

在这里插入图片描述

这条路不行,我们换一个吧~

让我们了解一下预渲染吧~

预渲染

打包完成生成文件(-emit hook)后,会启动一个模拟网站,用(谷歌官方无头浏览器)访问指定页面,获取对应的html结构,输出结果指定一个目录,过程类似于爬虫。

不适合数据变化较大的网站,如天气网、股票网等。

预渲染的好处是可以用库来完成~

npm i prerender-spa-plugin --save

当是你的时候,别以为事情那么美好——这个坑真的把我困了一个下午~~要不是我搜了一篇300浏览量的大文章,我今天都想不通了,因为这个库的最新版本是4年前的,有些人可以使用,但我不明白。卡了一个下午就不再喜欢了。

在这里插入图片描述

看看我用的坑-spa-,一切都很好,刚开始打包的时候才知道npm run不好

在这里插入图片描述

这只是问题之一,真的让人吐血

在这里插入图片描述

还好通过大佬的文章提到了一个新的库,所以试了一下

npm i prerender-spa-plugin-next --save

老板说-spa–next可能是-spa-的升级版,所以我侥幸试了一下。你猜怎么着?按照官网的步骤,我在vue..js中编写了基本配置。我配置了两条路由,一条用于首页,一条用于

// vue.config.jsconst { defineConfig } = require('@vue/cli-service');const path = require("path");// 预渲染const PrerenderSPAPlugin = require('prerender-spa-plugin-next');module.exports = defineConfig({  transpileDependencies: true,  // prerender-spa-plugin-next预渲染  configureWebpack: {    plugins: [      new PrerenderSPAPlugin({        // 需要预渲染的页面,跟router路由一致        routes: [ '/', '/about' ],      })    ]  }})

嘿嘿,成功了~

在这里插入图片描述

打包文件夹中确实有单独的html。也就是我配置的另一条路由里面有一个静态的.html

在这里插入图片描述

效果

查看预渲染的源代码

在这里插入图片描述

在我做之前

在这里插入图片描述

在这里插入图片描述

页面查看源代码丰富~

点击进入博客橙色cms

为了更好,我会继续在里面写一些公共的接口,方便大家在静态网络或者做个人博客的时候使用

在这里插入图片描述

目前已经写了7个接口——未来会不断增加,欢迎大家猜猜

在这里插入图片描述

免责声明:本文来自网络用户投稿,不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除,本站不负任何责任及承诺。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

发表评论

登录后才能评论