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

随着各大前端框架的诞生和演变，

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								 
 1/13    1 2 3 4 5 6 下一页 尾页