Nuxt踩坑随手记

2021-10-13 | 1,600浏览 | 0评论 | 标签:nuxt nuxt问题

本文记录Nuxt.js使用过程中遇到的问题及解决方法。

生命周期(asyncData、fetch、mounted...)执行了两次

原因:可能是Nuxt的bug
讨论https://github.com/nuxt/nuxt.js/issues/5703
解决:1.仔细检查每一个静态资源加载情况,特别是图片,兼容为空的情况; 2. 检查每一个组件和模块,需要一个一个地注释和排除,包括自定义和第三方; 3.检查v-show,换成v-if试试。

加载速度太慢?

网页性能优化是一个系统工程,以"外评网"例。
使用nuxt自带analyze工具可以查看每一个资源大小,

// 修改nuxt.config.js文件
build:{
  analyze:true,
  ...
}

以下是最终优化后的效果,从原来的>1Mb,减小到345kb,且还有优化的空间。
nuxt查看打包积体.jpg

1. UI组件按需加载

外评网UI基于element-ui,剔除多余组件后,积体减少了几十kb。

// plugins/element-ui.js文件,按需加载
import {Button,Form} from 'element-ui';
const components = [Button,Form];
const Element = {
  install(Vue) {
    components.forEach(component => {
      Vue.component(component.name, component)
    })
  }
}
Vue.use(Element, { size: 'mini' })

2.雪碧图

查看network时,发现许多svg图标加载都在1s左右,改成雪碧图之后网络请求瞬间减少了7~8个。png图片用tinyPng压缩后,体积还能减少20%~60%不等。
QQ截图20211025181005.jpg

3.css外部引入

Nuxt默认把css直接渲染在页面,百度官网也是同样的做法,这个见仁见智。我认为如果css较多,服务器配置又不高,还是提到外面引入好些。

//修改nuxt.config.js配置 
build: {
  extractCSS: {
    allChunks: true
  }
}

4.图片懒加载

这个没啥好说的,我使用的vue-lazyload,支持imgbackground-img两种方式的图片的懒加载,配置也简单。

5.CDN

目前我还没做,因为Demo网站没备案,国外cdn又因为某些原因不稳定。有条件的应该上。

6.硬件

说了这么多,你可以点开Demo站点试试效果。速度达到你的预期了吗?老实说,没达到我的预期,因为Demo站用的1c2h1m香港服务器,再怎么折腾,速度还是没有国内同等级服务器快。

(本篇完。有疑问欢迎留言探讨)

留言:

*

* (方便回复通知)

打赏
编辑代码 运行结果
退出