mpvue性能优化实战技巧(小结)(4)

import { loadPlayList } from '@/api/audio' async function getPlayList (courseId, currentAudioId) { // 先从缓存列表中拿 const playList = wx.getStorageSync('playList') if (playList && playList.length > 0 && courseId === playList[0].courseId) { // 命中缓存，则从直接返回 return subPlayList(playList, currentAudioId) } else { // 没有命中缓存，则从api中获取 const list = await loadPlayList(courseId) wx.setStorage({ key: 'playList', data: list }) return subPlayList(list, currentAudioId) } }

播放上一首也是同理，就不赘述了。

PS: 将vuex中的数据精简后，我所做的小程序在播放音频时刷其他页面已经非常流畅啦，效果非常好。

六、动画优化

这个问题在mpvue开发音频类小程序踩坑和建议已经讲过了，感兴趣的可以移步看一眼，这里只写下概述:

如果要使用动画，尽量用css动画代替wx.createAnimation使用css动画时建议开启硬件加速最后

大致总结一下上面所讲的几个要点：

开发时打开Vue.config._mpTrace = true。

谨慎引入第三方库，权衡收益。

添加数据到data中时要克制，能精简尽量精简。

图片记得要压缩，图片在显示时才渲染。

vuex保持数据精简，必要时可先存storage。

性能优化是一个永不止步的话题，我也还在摸索，不足之处还请大家指点和分享。