推荐12个国外免费自助建站网站,青海项目信息网官网,外销网站建设,自动发卡网站建设前言 Ajax 技术的出现#xff0c;让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容#xff0c;这就是单页应用。在一个单页应用中#xff0c;往往只有一个 html 文件#xff0c;然后根据访问的 url 来匹配对应的路由脚本#xff0c;动态地渲染页面内容。单页应用…前言 Ajax 技术的出现让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容这就是单页应用。在一个单页应用中往往只有一个 html 文件然后根据访问的 url 来匹配对应的路由脚本动态地渲染页面内容。单页应用在优化了用户体验的同时也给我们带来了许多问题例如 SEO 不友好、首屏可见时间过长等。服务端渲染SSR和预渲染Prerender技术正是为解决这些问题而生的。
服务端渲染与预渲染区别
客户端渲染 用户访问 url请求 html 文件前端根据路由动态渲染页面内容。关键链路较长有一定的白屏时间
服务端渲染 用户访问 url服务端根据访问路径请求所需数据拼接成 html 字符串返回给前端。前端接收到 html 时已有部分内容
预渲染 构建阶段生成匹配预渲染路径的 html 文件注意每个需要预渲染的路由都有一个对应的 html。构建出来的 html 文件已有部分内容
服务端渲染与预渲染共同点
针对单页应用服务端渲染和预渲染共同解决的问题
SEO 单页应用的网站内容是根据当前路径动态渲染的html 文件中往往没有内容网络爬虫不会等到页面脚本执行完再抓取 弱网环境 当用户在一个弱环境中访问你的站点时你会想要尽可能快的将内容呈现给他们。甚至是在 js 脚本被加载和解析前 低版本浏览器 用户的浏览器可能不支持你使用的 js 特性预渲染或服务端渲染能够让用户至少能够看到首屏的内容而不是一个空白的网页。 预渲染能与服务端渲染一样提高 SEO 优化但前者比后者需要更少的配置实现成本低。弱网环境下预渲染能更快地呈现页面内容减少页面可见时间。
什么场景下不适合使用预渲染
个性化内容 对于路由是 /my-profile 的页面来说预渲染就失效了。因为页面内容依据看它的人而显得不同
经常变化的内容 如果你预渲染一个游戏排行榜这个排行榜会随着新的玩家记录而更新预渲染会让你的页面显示不正确直到脚本加载完成并替换成新的数据。这是一个不好的用户体验
成千上万的路由 不建议预渲染非常多的路由因为这会严重拖慢你的构建进程。
Prerender SPA Plugin prerender-spa-plugin 是一个 webpack 插件用于在单页应用中预渲染静态 html 内容。因此该插件限定了你的单页应用必须使用 webpack 构建且它与用什么框架无关无论你是使用 React 或 Vue 甚至不使用框架都能用来进行预渲染。
prerender-spa-plugin 原理 那么 prerender-spa-plugin 是如何做到将运行时的 html 打包到文件中的呢原理很简单就是在 webpack 构建阶段的最后在本地启动一个 phantomjs访问配置了预渲染的路由再将 phantomjs 中渲染的页面输出到 html 文件中并建立路由对应的目录。
安装使用
yarn 或者 npm
yarn add prerender-spa-plugin -Dnpm install prerender-spa-plugin --save-dev前端配置vue.config.js中增加
const PrerenderSPAPlugin require(prerender-spa-plugin);
const Renderer PrerenderSPAPlugin.PuppeteerRenderer;
const path require(path);
module.exports {configureWebpack: config {if (process.env.NODE_ENV ! production) return;return {plugins: [new PrerenderSPAPlugin({// 生成文件的路径也可以与webpakc打包的一致。// 下面这句话非常重要// 这个目录只能有一级如果目录层次大于一级在生成的时候不会有任何错误提示在预渲染的时候只会卡着不动。staticDir: path.join(__dirname, dist),// 对应自己的路由文件比如a有参数就需要写成 /a/param1。routes: [/, /product, /about],// 这个很重要如果没有配置这段也不会进行预编译renderer: new Renderer({inject: {foo: bar},headless: false,...})})]}}
}在 main.js 中
new Vue({router,store,render: h h(App),mounted() {document.dispatchEvent(new Event(render-event))}
}).$mount(#app)router.js 中设置mode: “history”
运行npm run build看一下生成的 dist 的目录里是不是有每个路由名称对应的文件夹。然后找个 目录里 的 index.html 用IDE打开看文件内容里是否有该文件应该有的内容。有的话就设置成功了 如果你想修改每个页面的meta 信息这里推荐使用 vue-meta
