精华内容
下载资源
问答
  • 预渲染

    2020-08-16 09:57:00
    可以通过预渲染将下载的文件预先在后台渲染,可以使用以下代码开启预渲染 <link rel="prerender" href="http://poetries.com"> 预渲染虽然可以提高页面的加载速度,但是要确保该页面百分百会被用户在之后...

    可以通过预渲染将下载的文件预先在后台渲染,可以使用以下代码开启预渲染

    <link rel="prerender" href="http://poetries.com">
    
    
    • 预渲染虽然可以提高页面的加载速度,但是要确保该页面百分百会被用户在之后打开,否则就白白浪费资源去渲染
    展开全文
  • 主要介绍了Android TextView预渲染研究的相关资料,需要的朋友可以参考下
  • vue预渲染

    2019-09-16 21:01:25
    1. vue要预渲染 vue项目的html页面一般如下: <body> <div id="app"></div> <script type="text/javascript" src="/app.js"></script> </body> 通过前端渲染的方法无法让...

    1. vue要预渲染

    vue项目的html页面一般如下:

      <body>
        <div id="app"></div>
      	<script type="text/javascript" src="/app.js"></script>
      </body>
    

    通过前端渲染的方法无法让搜索引擎抓取。所以要将一些页面先渲染出来。

    2. vue做seo的方法

    一般可以用服务端渲染,不过要node服务器。

    1. 服务端渲染
    2. 预渲染

    我的项目是java的,所以我用预渲染。

    3. vue预渲染的方法

    1. 将vue-router改成history
    new VueRouter({
      mode: 'history'
    });
    
    1. 后台修改
      找不到静态资源路径就返回index.html,重定向即可。

    2. 安装prerender-spa-plugin

    npm install prerender-spa-plugin --save
    
    1. 在vue.config.js加入配置
    const PrerenderSPAPlugin = require('prerender-spa-plugin');
    
    module.exports = {
      configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
          plugins: [
            new PrerenderSPAPlugin({
              staticDir: path.join(__dirname, 'dist'),
              // 要渲染的路由
              routes: ['/login', '/index/home'],
              renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
                renderAfterTime: 5000
              })
            }),
          ],
        };
      }
    }
    
    1. 编译打包
    npm run build
    

    编译后的文件如下:

    .
    ├── index
    │   ├── home
    │   └── index.html
    ├── index.html
    └── login
        └── index.html
    
    展开全文
  • Vue 预渲染

    2019-02-28 14:55:46
    Vue 预渲染 预渲染 VS SSR 预渲染 更好的 SEO 相比 SSR 非常简单,对代码的改造非常小 应用的路由比较少或者只需要优化个别路由 内容到达时间(time-to-content) 要求不是很高 SSR 服务端渲染 相对于预渲染,SSR有...

    Vue 预渲染

    预渲染 VS SSR

    预渲染

    • 更好的 SEO
    • 相比 SSR 非常简单,对代码的改造非常小
    • 应用的路由比较少或者只需要优化个别路由
    • 内容到达时间(time-to-content) 要求不是很高

    SSR 服务端渲染

    • 相对于预渲染,SSR有更快的内容到达时间(time-to-content)
    • 开发条件所限:浏览器特定的代码,只能在某些生命周期钩子函数中使用;一些外部扩展库可能需要特殊处理,才能在服务器渲染应用程序中运行
    • 涉及构建设置和部署的更多要求
    • 更多的服务器端负载
    • 在现成的代码下改造的工作量很大

    总结:例如,如果你正在构建一个内部仪表盘,初始加载时的额外几百毫秒并不重要,这种情况下去使用服务器端渲染 (SSR) 将是一个小题大作之举。然而,内容到达时间 (time-to-content) 要求是绝对关键的指标,在这种情况下,服务器端渲染 (SSR) 可以帮助你实现最佳的初始加载性能。

    如何实现

    • 安装插件 yarn add prerender-spa-plugin
    • 应用程序路由使用 history 模式
    • 需要保证 App.js 中的 template 的根节点有 id="app",或者你程序对应的启动 ID 名
    • 修改构建时候的配置,添加插件的相关信息
    // vue-cli 3
    // vue.config.js
    const PrerenderSPAPlugin = require('prerender-spa-plugin')
    
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
    const path = require('path')
    
    module.exports = {
      productionSourceMap: false,
      configureWebpack(config) {
        if ('production' === process.env.NODE_ENV) {
          config.plugins.push(
            new PrerenderSPAPlugin({
              staticDir: path.join(__dirname, 'dist'),
              routes: ['/', '/carRecordDetail', '/caseRecordDetail', '/personRecordDetail'],
              renderer: new Renderer({
                headless: false,
                renderAfterTime: 5000
              })
            })
          )
        }
      }
    }
    
    

    常用配置详解

    • staticDir : 预渲内容的输出地址
    • routes : 需要渲染的路由
    • server : 服务端的代理,用于发送请求
    • renderer : 渲染器
      • headless : false 情况下会打开浏览器,方便我们调试是否渲染的数据准确
      • renderAfterTime : 等待多少秒之后去开始渲染,设置合适的事件方便我们等待请求返回数据
      • renderAfterElementExists : 当存在某个元素的时候开始渲染
      • renderAfterDocumentEvent : 当初发某个事件的时候开始渲染。在合适的地方调用 document.dispatchEvent(new Event('custom-render-trigger')) 事件。需要保持事件名称和设置的名称一致
    • 更多内容

    运行原理

    在这里插入图片描述

    • 打包出内容相对于原本的信息之外,额外添加了对应路由的 index.html 文件
    • 这些文件每一个都是我们的应用程序入口
    • 相当于我们可以通过多个入口去访问我们的 SPA 程序
    • 每个入口访问的程序后续操作和反应都是一致的
    • 当我们一开始访问不同的路由时候,这时候就会加载对应的 index.html 文件,实现类似静态页面的效果
    • 当网络爬虫爬去 www.xxx.xx/aaa 页面的时候,就会加载到 aaa/index.html

    遇到的坑

    • 一定要使用 history 路由模式
    • 一定要保证 App.js 中的 template 的根节点有 id="app",或者你程序对应的启动 ID 名。因为如果没有这个 ID 渲染出来的页面根元素就没有这个 ID ,就无法启用你的 Vue 程序,这时候的页面真的就是一个静态页面了什么操作都无效
    • 安装 prerender-spa-plugin 失败,实际上是安装它的依赖 puppeteer 失败。这个插件需要下载 Chromium解决方案

    注意:prerender-spa-plugin 不仅仅只能使用在 Vue 项目。类似的 webpace 构建的应用也可以使用。例如:react Angular# Vue 预渲染

    展开全文
  • 文章目录简介那么什么是服务端渲染为什么使用服务端渲染服务端渲染 or 预渲染区别如何使用预渲染如何搭建一个预渲染开发环境Tip写在最后 简介 关于 Vue 的 SPA 说的已经太多太多了,它为我们带来了极速的开发体验,...

    简介

    关于 Vue 的 SPA 说的已经太多太多了,它为我们带来了极速的开发体验,极强的开发效率。可能唯一有些许不足的就是,当我们对 SEO 很在乎的时候,我们如何去处理 SEO 的需求。

    关于 SEO ,Vue 也有现成的解决方案: Vue 服务端渲染

    那么

    什么是服务端渲染

    服务端将完整的页面 html 输出到客户端显示,与 SPA (Single-Page-Application)使用 js 渲染页面不同。

    为什么使用服务端渲染

    • 更好的 SEO
    • 更快的内容到达时间

    服务端渲染 or 预渲染

    就像官网所说的,如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要 预渲染,一个典型的预渲染使用场景可能类似 这个网站

    区别

    服务端渲染预渲染的使用场景还是有较明显的区别的。预渲染的使用场景更多是我们所说的静态页面的形式,比如说这个网站。服务端渲染适用于大型的、页面数据处理较多且较为复杂的、与服务端有数据交互的功能型网站,一个明显的使用场景就是电商网站。

    如果你想阅读我写的 Vue 服务端渲染,请移步:手把手教你 Vue 服务端渲染

    如何使用预渲染

    预渲染的核心是使用 prerender-spa-plugin,如何使用它呢?我们还是以这个网站源代码中的 webpack 配置为例:

    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      routes: [ '/', '/home', '/infomation', '/ticket', '/scenery', '/about' ],
      renderer: new Renderer({
        headless: false,
        renderAfterDocumentEvent: 'render-event'
      })
    }),
    
      
      
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    我们需要简单的配置一下,项目所有的路由,最终生成后有几个页面,都是以这个配置为依据,而不是你在 vue-router 中配置的路由。

    最基础也最核心的配置项也就这几行代码,当然,如果你有更多的需求配置项,你可以去 github 上查看文档,文档中也有很详细的介绍。

    如何搭建一个预渲染开发环境

    如果你也想要使用预渲染来开发你的网站的话,最简单的方法就是克隆这个项目,然后简单删减以后进行二次开发,整个的开发流程和 Vue 是一模一样的。

    Tip

    1、相较于 Vue 的模板中大而全的 webpack 配置项,预渲染中的 webpack 配置简单小巧,如果你有一些 webpack 的配置需求的话,你可能需要自己动手。

    2、我的这个项目使用的是 stylus 来作为 css 预编译语言,如果你想使用其他的 css 预编译语言的话,需要额外安装一些插件以及做一些简单配置。当然了,默认的 css 肯定是支持的。

    3、在写这个项目的过程中,也有做一些简单的知识点记录。vue-prerender 笔记

    4、最后项目打包发布到生产环境,使用 npm run build 一键操作即可。如果你想要部署到子目录下的话,那么,你可能需要做一些简单的修改,具体在 vue-prerender 笔记 有提到。

    写在最后

    项目预览
    项目github地址
    原文地址

    展开全文
  • VUE预渲染及遇到的坑

    2020-10-18 02:29:37
    主要介绍了VUE预渲染及遇到的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 前端的预渲染

    2020-11-02 09:44:12
    可以通过预渲染将下载的文件预先在后台渲染,可以使用以下代码开启预渲染 <link rel="prerender" href="http://poetries.com"> 预渲染虽然可以提高页面的加载速度,但是要确保该页面百分百会被用户在之后...
  • 主要介绍了Vue使用预渲染代替SSR的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue全家桶之预渲染

    2019-10-21 10:57:24
    vue全家桶@预渲染 预渲染 最近的项目首屏加载时间长的令人发指,因此仔细研究了预渲染。服务端渲染(SSR)和预渲染(Prerender)技术都可以解决SEO问题和加载时间长问题。 渲染方式 客户端渲染:用户访问 url,请求 ...
  • 预渲染描述了在构建时渲染客户端应用程序的过程,生成有用的静态HTML,可以发送到浏览器而不是空的引导页面。
  • Vue实现预渲染

    千次阅读 2020-11-27 09:59:11
    前言 Ajax 技术的出现,让我们的...服务端渲染(SSR)和预渲染(Prerender)技术正是为解决这些问题而生的。 服务端渲染与预渲染区别 客户端渲染:用户访问 url,请求 html 文件,前端根据路由动态渲染页面内容。关键链
  • 主要介绍了服务端预渲染之Nuxt(使用篇),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了详解服务端预渲染之Nuxt(介绍篇),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 水疗中心动态预渲染 SPA动态预渲染
  • laravel5-prerender Laravel 5 中间件,用于为 SEO 动态预渲染 javascript 渲染页面。
  • Angular 预渲染实践

    2021-03-15 14:19:11
    预渲染理解 客户端在接收html文件之前,服务端将html标签占位做动态数据填充;服务端处理好一个html字符串文件生成一个静态的html页面文件返回给客户端,客户端即会解析html,渲染呈现出UI/UX;特性: 1、访问加载...
  • 简单预渲染 太多复杂的解决方案不起作用。 安装 Deps: sudo apt-get 安装 phantomjs 确保已安装幻像: 幻象 npm 安装幻象
  • Webpack的无痛通用预渲染。 与一起很好地工作。 :face_with_monocle: 什么是预渲染预渲染描述了在构建时渲染客户端应用程序,生成有用的静态HTML(可发送到浏览器而不是空的引导页面)的过程。 预渲染就像...
  • vue之预渲染

    2018-09-20 11:23:44
    vue预渲染‘’(https://blog.csdn.net/aeoliancrazy/article/details/79539143)
  • 主要介绍了谈谈我在vue-cli3中用预渲染遇到的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue 预渲染实现方案

    万次阅读 2019-06-16 19:39:35
    前言 Ajax 技术的出现,让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容,这就是单页应用。...单页应用在优化了用户体验的同时,...服务端渲染(SSR)和预渲染(Prerender)技术正是为解决这些问题而生的。...
  • 预渲染的TextView演示 该演示使用StaticLayout在自定义TextView中渲染文本,并在进入UI之前在另一个线程中创建StaticLayout,并且这些StaticLayout在虚拟画布中绘制,这些画布会预热系统中的TextLayoutCache。 这些...
  • 两种形式的预渲染

    2020-10-02 12:07:24
    两种形式的预渲染 Next.js 具有两种形式的预渲染:静态生成(Static Generation)和服务器端渲染(Server-side Rendering)。这两种方式的不同之处在于为 page(页面)生成 HTML 页面的时机。 静态生成 (推荐):...
  • 主要介绍了vue-cli单页面预渲染seo-prerender-spa-plugin操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 项目预渲染(prerender-spa-plugin)

    千次阅读 2019-06-03 14:53:56
    服务器端渲染 vs 预渲染 (SSR vs Prerendering) 如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面(例如/,/about,/contact等)的 SEO,那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML,而是...
  • npm run build 生成预渲染页面 npm run serve 开启http-server服务,监控生成的dist目录 npm run node 开启Koa服务,监控生成的dist目录 指南 预渲染原理 在webpack打包结束并生成文件后(after-emit hook),会启动一...
  • SPA静态预渲染变得容易 我非常厌倦了从上一个项目中复制并粘贴最新的Webpack配置以启动下一个项目,并使旧项目腐烂而又没有简便的升级方法。 因此,我创建了react-toolbox是一个备受赞誉的工具箱,用于以最少的设置...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,188
精华内容 23,675
关键字:

预渲染