前端性能优化

参考链接：Vue项目前端性能优化https://mp.csdn.net/mp_blog/creation/editor/106750434提升90%加载速度——vuecli下的首屏性能优化https://segmentfault.com/a/1190000019499007?sort=votes项目中使用过：

1、路由懒加载，不使用静态引入

 2、 productionSourceMap: false，npm run build打包编译不生成map文件，减少文件体积。

3、小图标使用字体图标，图标css使用阿里iconfont cdn链接。使用字体图标好处：体积小，修改字体大小、颜色方便。项目具体实现：组件图标，设置prop参数name,使用是传入名称即可。对比以往雪碧图：字体图标修改颜色比较方便。

4、提取公共样式和公共js。

5、组件使用定时器，组件销毁时清除。

6、v-if和v-show使用考量，不涉及权限频繁切换v-show，涉及权限使用v-if。

7、v-for循环绑定添加唯一识别key，index或者id。但是频繁插入 *** 作的建议使用id，可参考此链接为什么不建议用index作为v-for的key？个人理解：如果使用index，插入元素不是末尾，插入一个新元素，differ算法会更新当前下标元素以及之后元素。因为插入新元素后，当前位置的元素以及其之后元素都向后移位了，differ比较会发现元素更新，增加性能消耗。而使用id，通过比较id元素无变化，仅执行插入 *** 作。

8、保证清晰度前提下，压缩图片。压缩css，js。传统html页面，js放在文档底部。