浅谈 vue 前端同构框架 nuxt 及其性能优化

前言

使用 nuxt.js 做项目也接近快一年了,从立项到内测、公测、再到正式上线,还有后面的不断维护,也陆陆续续的踩了很多坑,其中最大的问题就是 node 的渲染性能问题了。模板转换是 cpu 密集型的操作,node 又是单线程的,并发一高,cpu 就会飙到 100% 。为了提升 nuxt.js 的渲染性能,也陆陆续续的查找了很多资料,发现网上针对 nuxt.js 的性能优化的文章比较少,比较杂。所以我写下这篇文章记录下自己对 nuxt.js 做性能优化的时候采取的一些方法,算是篇总结吧,也希望能给从谷歌搜到这的朋友一些帮助。本文着重于性能优化,对概念类的东西会一概而过。


浅谈 vue 在 created 和 mounted 请求异步数据的区别

前言

今天下班,日常在公交车上用手机浏览技术社区,刷文章。偶然看到一篇文章,其中一部分内容如下图:
浅谈 vue 在 created 和 mounted 请求异步数据的区别
其大意是在 created 这个生命周期请求异步数据的话,请求过多,页面会长时间处于白屏。看到这我就不淡定了,请求不是异步的?怎么会影响到渲染呢?EventLoop 白学了?之后我将这张截图发给朋友讨论了一波,发现还是有挺多人搞不清楚其中的关键,都说在 mounted 阶段请求数据会比较好,在 created 请求可能会找不到需要渲染的元素之类的。于是就有了这篇文章的诞生。


关于 Vue2.0 的生命周期

前言

Vue实例从创建开始到结束销毁的一系列过程,在这个过程中会有特定阶段的钩子函数,这些钩子函数会在 Vue 的各个状态中执行。
总体上分为 8 个阶段:创建前/创建后;挂载前/挂载后;更新前/更新后;销毁前/销毁后。


Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×