Vue-SSR服务端渲染优化方案

本文主要介绍Vue-SSR优化前端项目

• 当你写完一个前端项目，并发布到nginx服务器上，当项目页面过多，你一定遇见过，刚刚打开网页时，慢的抠脚，但再点击其他页面时，会好好多；而且细心的你一定会发现，为什么我的网站不会被百度收录；其实这不是你的锅，这是vue项目本来的样貌；抱怨没用，但可以去改变它。

---

传统Vue项目

返回app.bundle.js，index.html给浏览器。 node服务器上返回对应的页面给浏览器。

产生的问题

• 1，seo问题
  搜索引擎优化，不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本。使用了Vue或者其它MVVM框架之后，页面大多数DOM元素都是在客户端根据js动态生成，可供爬虫抓取分析的内容大大减少

• 2，首屏问题
  大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间

---

服务端渲染

两个入口，两次打包（客户端、服务端）

---

Nuxt.js

从头搭建一个服务端渲染的应用是相当复杂的。幸运的是，我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。