<template> <img :src="UserIcon"> </template> <script> import UserIcon from '@/assets/images/user_icon.png' export default { data () { return { UserIcon } } } </script>
这样会导致打包后的代码，图片是base64形式（很长的一段字符串）存放在data中，不利于精简data。同时当该组件多个地方使用时，每个组件实例都会携带这一段很长的base64代码，进一步导致数据的冗余。
因此，建议将静态图片放到static目录下，这样引用：
<template> <img src="https://www.jb51.net/static/images/user_icon.png"> </template>
代码也更简洁清爽。
看一下做了上面操作的前后对比图，使用体验上也流畅了很多。
三、swiper优化
小程序自身提供的swiper组件性能上不是很好，使用时要注意。参考着两个思路：
在我使用时，由于需求原因，动态删掉swiper-item的思路不可行（手滑时会造成抖动）。因此只能作罢。但仍然可以优化一下：
将未显示的swiper-item中的图片用v-if隐藏到，当判断到current时才显示，防止大量图片的渲染导致的性能问题。
四、vuex使用注意事项
我之前写过的一篇mpvue开发音频类小程序踩坑和建议里面有讲如何在小程序中使用vuex。但遇到了个比较严重的性能问题。
1. 问题描述
我开发的是一个音频类的小程序，所以需要将播放列表playList,当前索引currentIndex和当前时长currentTime放进state.js中：
const state = { currentIndex: 0, // playList当前索引 currentTime: 0, // 当前播放的进度 playList: [], // {title: '', url: '', singer: ''} }
每次用户点击播放音频时，都会先加载音频的播放列表playList,然后播放时更新当前时长currentTime，发现有时候播音频时整个小程序非常卡顿。
注意到，音频需每秒就得更新一次currentTime,即每秒就做一次setData操作，稍微有些卡顿是可以理解的。但我发现是播放列表数据比较多时会特别卡，比如playList的长度是100条以上时。2. 问题原因
我开启Vue.config._mpTrace = true后发现一个规律：
当palyList数据量小时，console显示造成的数据量更新数值比较小；当playList比较大时，console显示造成的数据量更新数值比较大。
PS： 我曾尝试将playList数据量增加到200条，每500ms的数据量更新达到800KB左右。到这里基本可以确定一个事实就是：更新state中的任何一个字段，将导致整个state全量一起setData。在我这里的例子，虽然我每次只是更新currentTime这个字段的值，但依然导致将state中的其他字段如playList,currentIndex都一起做了一次setData操作。
3. 解决问题
有两个思路：
精简state中保存的数据，即限制playList的数据不能太多，可将一些数据暂存在storage中
vuex采用Module的写法能改善这个问题，虽然使用时命名空间造成一定的麻烦。vuex传送门
一般情况下，推荐使用后者。我在项目中尝试使用了前者，同样能达到很好的效果，请继续看下面的分享。
五、善用storage
1.为什么说要善用storage