关于nuxt.js和seo的实践我有话要说

1、 为啥我最近要输出这么多nuxt文章呢?

 由于nuxt社区生态的相关解决方案并不多,不像vue,react那样,一呼百应,搜一个问题就有若干个解决方案。相反nuxt查出来的非常少,甚至一些不常见的坑都找不到解决方案,只能自己花很多时间去研究解决。
 经过我最近两个月的奋战,现在可以说是入门nuxt了。但我一想到nuxt的社区,我觉得我很有必要为nuxt社区做一些贡献了,不仅是希望能帮助到刚入门nuxt的小伙伴,同时也是给自己做个笔记,说不定以后哪天又需要用nuxt开发网站,就不用从零开始摸索,直接从笔记里快速复习知识点,提升开发效率。
 其实我比较推荐小伙伴们 如果在开发nuxt过程遇到非常棘手的bug但你却解决了,同时nuxt社区刚好没有这方面的解决方案,我希望这位小伙伴可以将其写成一篇文章分享出来。只有我们每个人都分享各自的新的解决方案,社区才会慢慢繁荣起来,对你我开发时都是非常友好的现象。

2、技术选型时为什么会选nuxt,而不是其他呢?

 前段时间因为公司官网需要重构,同时还要求网站内容支持SEO,我所知道的支持SEO有原生HTML+jQuery,还有SSR服务端渲染。之前一直听说前端有SSR这门技术,查了下就是基于vue开发的上层框架nuxt,考虑到市场需求、前景、我自身熟悉的技术栈是Vue,果断选择nuxt。这样开发效率就快了很多,所以就边开发边学习nuxt,整了两个月基本是入门nuxt了。
 从网站的搭建、UI组件库的按需导入、axios封装以及proxy如何解决跨域、所有接口的统一管理、组件与组件之间如何传参、asyncData首屏渲染时应该注意哪些、公共组件的封装。上述工作完事后就开始性能优化了:

1、代码层面

v-if的使用防止页面崩溃、用Promise.all并发调接口,组件库(ElementUI)和工具库(lodash的节流)的按需导入等。

2、打包压缩

整体项目用webpack打包压缩、首屏渲染、CDN,还有服务器Nginx开启gzip压缩优化。

3、SEO优化

所有SEO标签动静态有哪些,image标签加上alt和title,sitemap,CNAME域名解析,利用H5语义化对页面的标签进行优化等。

3、为啥要做这么多工程的搭建和优化呢,是吃饱了撑吗?

答案:不是的,因为一个优秀的支持seo网站都是逃不开这些的,同时更多优化不止这些,需要不断探索并添加到项目中来,这都是一个优秀网站不可或缺的重要组成部分。上面的部分技术我找个时间一一整理后发布上来,暂时就先告一段落,后续会再次发布。

猜你喜欢

转载自blog.csdn.net/Steven_Son/article/details/127968847