加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 黄冈站长网 (http://www.0713zz.com/)- 数据应用、建站、人体识别、智能机器人、语音技术!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

Vue服务端渲染实践 ——Web应用首屏耗时最优化方案

发布时间:2019-03-24 14:45:38 所属栏目:优化 来源:counterxing
导读:副标题#e# 随着各大前端框架的诞生和演变,SPA开始流行,单页面应用的优势在于可以不重新加载整个页面的情况下,通过ajax和服务器通信,实现整个Web应用拒不更新,带来了极致的用户体验。然而,对于需要SEO、追求极致的首屏性能的应用,前端渲染的SPA是糟糕
副标题[/!--empirenews.page--]

随着各大前端框架的诞生和演变,SPA开始流行,单页面应用的优势在于可以不重新加载整个页面的情况下,通过ajax和服务器通信,实现整个Web应用拒不更新,带来了极致的用户体验。然而,对于需要SEO、追求极致的首屏性能的应用,前端渲染的SPA是糟糕的。好在Vue 2.0后是支持服务端渲染的,零零散散花费了两三周事件,通过改造现有项目,基本完成了在现有项目中实践了Vue服务端渲染。

关于Vue服务端渲染的原理、搭建,官方文档已经讲的比较详细了,因此,本文不是抄袭文档,而是文档的补充。特别是对于如何与现有项目进行很好的结合,还是需要费很大功夫的。本文主要对我所在的项目中进行Vue服务端渲染的改造过程进行阐述,加上一些个人的理解,作为分享与学习。

概述

本文主要分以下几个方面:

  •  什么是服务端渲染?服务端渲染的原理是什么?
  •  如何在基于Koa的Web Server Frame上配置服务端渲染? 
    • 基本用法
    •  Webpack配置
    •  开发环境搭建
      • 渲染中间件配置
  •  如何对现有项目进行改造?
    •   基本目录改造;
    •   在服务端用vue-router分割代码;
      •   在服务端预拉取数据;
      •   客户端托管全局状态;
      •   常见问题的解决方案;

什么是服务端渲染?服务端渲染的原理是什么?

Vue.js是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出Vue组件,进行生成DOM和操作DOM。然而,也可以将同一个组件渲染为服务器端的HTML字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

上面这段话是源自Vue服务端渲染文档的解释,用通俗的话来说,大概可以这么理解:

  •  服务端渲染的目的是:性能优势。 在服务端生成对应的HTML字符串,客户端接收到对应的HTML字符串,能立即渲染DOM,最高效的首屏耗时。此外,由于服务端直接生成了对应的HTML字符串,对SEO也非常友好;
  •  服务端渲染的本质是:生成应用程序的“快照”。将Vue及对应库运行在服务端,此时,Web Server Frame实际上是作为代理服务器去访问接口服务器来预拉取数据,从而将拉取到的数据作为Vue组件的初始状态。
  •  服务端渲染的原理是:虚拟DOM。在Web Server Frame作为代理服务器去访问接口服务器来预拉取数据后,这是服务端初始化组件需要用到的数据,此后,组件的beforeCreate和created生命周期会在服务端调用,初始化对应的组件后,Vue启用虚拟DOM形成初始化的HTML字符串。之后,交由客户端托管。实现前后端同构应用。

如何在基于Koa的Web Server Frame上配置服务端渲染?

基本用法

需要用到Vue服务端渲染对应库vue-server-renderer,通过npm安装:

  1. npm install vue vue-server-renderer --save 

最简单的,首先渲染一个Vue实例:

  1. // 第 1 步:创建一个 Vue 实例  
  2. const Vue = require('vue');  
  3. const app = new Vue({  
  4.   template: `<div>Hello World</div>`  
  5. });  
  6. // 第 2 步:创建一个 renderer  
  7. const renderer = require('vue-server-renderer').createRenderer();  
  8. // 第 3 步:将 Vue 实例渲染为 HTML  
  9. renderer.renderToString(app, (err, html) => {  
  10.   if (err) {  
  11.       throw err;  
  12.   }  
  13.   console.log(html);  
  14.   // => <div data-server-rendered="true">Hello World</div>  
  15. }); 

与服务器集成:

  1. module.exports = async function(ctx) {  
  2.     ctx.status = 200;  
  3.     let html = '';  
  4.     try {  
  5.         // ...  
  6.         html = await renderer.renderToString(app, ctx);  
  7.     } catch (err) {  
  8.         ctx.logger('Vue SSR Render error', JSON.stringify(err));  
  9.         html = await ctx.getErrorPage(err); // 渲染出错的页面  
  10.     }  
  11.     ctx.body = html;  

使用页面模板:

当你在渲染Vue应用程序时,renderer只从应用程序生成HTML标记。在这个示例中,我们必须用一个额外的HTML页面包裹容器,来包裹生成的HTML标记。

(编辑:PHP编程网 - 黄冈站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读