码迷,mamicode.com
首页 > 其他好文 > 详细

Vue之性能优化篇

时间:2020-06-11 13:26:20      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:性能   element   ecc   时间   数据   对组   资源   三方   自己   

Vue众所周知,是一个轻量级的框架,源码仅仅为72.9KB,但是也有它自己的缺点,就是首屏加载会比较慢,因为和传统项目相比,Vue会在首屏加载的时候加载出所有的组件和插件,并且向服务器请求数据,导致可能有时候首屏加载的时间就会到4、5秒的样子。

但是这样做很明显是在挑战用户的耐心,按照惯例,最好能把加载时间控制在1秒左右。接下来小编讲一下Vue性能优化的两个个方向。

一.源码优化

1、代码模块化,咱们可以把很多常用的地方封装成单独的组件,在需要用到的地方引用,而不是写过多重复的代码,每一个组件都要明确含义,复用性越高越好,可配置型越强越好,包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。

2、for循环设置key值,在用v-for进行数据遍历渲染的时候,为每一项都设置唯一的key值,为了让Vue内部核心代码能更快地找到该条数据,当旧值和新值去对比的时候,可以更快的定位到diff。

技术图片

3、Vue路由设置成懒加载,当首屏渲染的时候,能够加快渲染速度。

技术图片

4、更加理解Vue的生命周期,不要造成内部泄漏,使用过后的全局变量在组件销毁后重新置为null。

5、可以使用keep-alive,keep-alive是Vue提供的一个比较抽象的组件,用来对组件进行缓存,从而节省性能。

技术图片

二.打包优化

1、修改vue.config.js中的配置项,把productionSourceMap设置为false,不然最终打包过后会生成一些map文件,如果不关掉,生成环境是可以通过map去查看源码的,并且可以开启gzip压缩,使打包过后体积变小。

技术图片

2、使用cdn的方式外部加载一些资源,比如vue-router、axios等Vue的周边插件,在webpack.config.js里面,externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件。

技术图片
技术图片

3、减少图片使用,因为对于网页来说,图片会占用很大一部分体积,所以,优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果,或者使用雪碧图来减少图片的体积。

4、按需引入,咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分,无端增加项目体积。比如在使用element-ui库的时候,可以只引入需要用到的组件。

技术图片

三、总结

这篇文章小编大概细化了一下关于Vue的一些优化方向,大家一定要记得,对于前端这个岗位来说,性能优化是一个很重要的点,为了让用户体有更好的体验,大家在提升自己技能的同时也要关注这些细小的方面~

Vue之性能优化篇

标签:性能   element   ecc   时间   数据   对组   资源   三方   自己   

原文地址:https://www.cnblogs.com/ming1025/p/13092441.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!