本文主要介绍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 应用提供了极其便利的开发体验。更酷的是,你甚至可以用它来做为静态站生成器。推荐尝试。

Logo

前往低代码交流专区

更多推荐